i am using multiple infoWindows in my Google Maps for some positions.
But how can i avoid overlapping of these infowindows? is it possible to make the infowindow draggable?
thanks in advance
for r_klt in c_klt
loop
htp.print('
var geocoder = new google.maps.LatLng('||r_klt.geoloc||''||');
var marker = new google.maps.Marker(
{
position: geocoder
,map: map
,animation:google.maps.Animation.DROP
,icon: '''||r_klt.img||'''
,title:" Marker: '||r_klt.MARKER_NAME||''||'"
});
var styles = [{stylers:[{saturation:-100}]}];
map.setOptions({styles: styles});
var content = ''<div style="font-size:10px;margin-top:0px;padding-top:0px;">'||r_klt.MARKER_NAME||'<br>'||r_klt.strasse||', '||r_klt.plz||' ' ||r_klt.ort||'</div>'';
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(content);
google.maps.event.addListener(marker,''click'',infoCallback(infowindow, marker));
');
end loop;
Infowindows are not draggable.
possible option: create a draggable marker at the infowindow's position.
Bind the position-property of the infowindow to the position-property of the marker. When you drag the marker, the infowindow will be dragged too.
Note: when you already have a marker and use this marker as 2nd argument to the open-method of the infoWindow the position will be bound automatically, you only need to make the marker draggable.
Related
I'm new in GoogleMaps API v3, I have speficied a bounds in my geocoder config, with this code:
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(-27.242171228168928, -27.242171228168928),
new google.maps.LatLng(-26.99771082240342, -109.0823670364868))
Now, the search are more accurately :-) But, now I want to display an alert if user drags the marker out of THAT bounds specified. How I can achieve that?
In short, I want to prevent the user place the marker outside the region
So you want to have an event listener for when the marker is dragged, using the bounds' contains function. Also if you really want to prevent them dragging that marker outside of the bounds, you probably also need to keep track of what the position was originally, and reset it back there if you have to. Something like this:
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-27.242171228168928, -27.242171228168928),
new google.maps.LatLng(-26.99771082240342, -109.0823670364868));
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.5087531, -0.1281153),
draggable: true
});
var markerPosition;
marker.addListener('dragstart', function() {
markerPosition = this.getPosition();
});
marker.addListener('dragend', function() {
if (bounds.contains(this.getPosition()) == false) {
alert("You've dragged the marker outside of the bounds allowed. We've reset it");
this.setPosition(markerPosition);
}
});
PS: I've also extended this answer into a blog post, including how to do the same with a polygon as well as bounds.
On a LatLngBounds object you can call the contains() function which takes a LatLng parameter and returns true\false if its contained with the LatLngBounds you have defined.
So in your case you can listen to the dragend event on your marker and in the listener handler use the approach above.
I want to know how can I change the position of the marker in the Google Map.
Currently I'm using:
var newlatlong = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
map.setCenter(newlatlong);
marker.setPosition(newlatlong);
map.setZoom(10);
Can I hand code the position of the marker in the map other than the center position?
I mean map.setCenter(newlatlong);, Instead of setCenter Is there any other position available? or can I hand code the position in the map where the marker should appear?
Not sure why you are running the code twice...
But yes, you can pass latitude/longitude values directly to the setCenter method
map.setCenter({lat: -34, lng: 151});
Documentation: https://developers.google.com/maps/documentation/javascript/reference#Map
update after comments
If you want to move the map center so that the marker is specific position (in pixels), you can center on the marker and then use the .panBy method to move the map a fixed amount of pixels.
To create a marker:
var marker = new google.maps.Marker({
map : map,
position : newlatlong
})
to update the position of this marker:
marker.setPosition(newlatlong);
to put the center at the east of marker, for example:
map.setCenter(new LatLng(newlatlong.lat,newlatlong.lng + 1.0))
You can set the center of the map and the marker separately using different longitude and latitudes:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.512318, -72.979349);
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.513001, -72.983845)
});
};
This makes the marker slightly off center to the left. I used this in a current project of mine.
I am working in Google Map v3(actually migrating V2 to V3), and trying to customize the Infowindow of the Direction Service.
I am able to display the Direction using Origin, Destination and waypoints.
My Map displayed the route correctly with Marker (green marker with A, B, C... text).
By default, On click of teh marker infowindow will display address of that marker.
I want to customize it, so that on click of marker it should disply mini map of that location in Infowindow with more zoom.
I am able to do some progress, but the problem here is,
- Marker is changed to red pointing marker instead of Green marker (with A, B, C...text)
- whichever the marker I click, infowindow will open on the last marker
- Once marker is clicked it will display minimap, but on close and again click of that marker it will display address (default behaviour)
- my code is actually overwriting the green marker with red pointed marker
Can soboby help me how to fix all these issue
Below is my code:
function CreateDirection (arrWaypoints) {
if (!this.directions) {
this.directions = new google.maps.DirectionsService();
var origin = arrWaypoints[0];
var destination = arrWaypoints[arrWaypoints.length - 1];
var tripWaypoints = [];
for (var i = 1; i < arrWaypoints.length - 1; i++) {
tripWaypoints.push({
location: new google.maps.LatLng(arrWaypoints[i].hb, arrWaypoints[i].ib),
stopover: true
});
}
var myMap = MyMap.getMap();
var steps = [];
this.directions.route({
origin: origin,
destination: destination,
waypoints: tripWaypoints,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.METRIC
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay = new google.maps.DirectionsRenderer();
// directionDiv div element in my page
directionsDisplay.setPanel(document.getElementById("directionDiv"));
directionsDisplay.setMap(myMap);
directionsDisplay.setDirections(result);
}
});
}
}
function CreateMiniMapInfoWindow (wayPointsArray) {
for (var i = 0; i < wayPointsArray.length; i++) {
var myMap = MyMap.getMap();
var marker = new google.maps.Marker({
position: wayPointsArray[i],
map: myMap
});
google.maps.event.addListener(marker, 'click', function() {
var myOptionsMini = {
zoom: 14,
center: wayPointsArray[i],
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var infowindow = new google.maps.InfoWindow();
var minimap = new google.maps.Map(document.getElementById ("minimap"), myOptionsMini);
document.getElementById("minimap").style.display = 'block';
minimap.setCenter(marker.getPosition());
var minimapDiv = document.getElementById("minimap");
infowindow.setContent(minimapDiv);
infowindow.open(myMap, marker);
});
}
}
I need the solution for:
- How to get customized infowindow (with minimap) for all the markers
- How to put the green markers with text A, B, C...
Attached image is what I am getting from the above code
I hope my question is clear.
Please let me know if anyone have any inputs.
Thanks,
Sharath
Pass the following object as argument to the DirectionsRenderer:
{markerOptions:{clickable:false,zIndex:1000}}
It will have 2 effects:
the custom markers will be placed behind the A,B,C-markers created by the DirectionsRenderer(currently they are still present, but behind your custom markers)
the markers created by the DirectionsRenderer are not clickable, the underlying custom markers are able to receive the click.
another option(I would prefer it): set the suppressMarkers-option of the DirectionsRenderer to true and use the A,B,C-markers for your custom markers(e.g. https://maps.gstatic.com/mapfiles/markers2/marker_greenA.png , https://maps.gstatic.com/mapfiles/markers2/marker_greenB.png )
Related to the infoWindow: all you need is 1 infoWindow with 1 map for all markers. Observe the click-event of the markers and when it occurs open the infoWindow and center the map inside the infowindow at the markers position(may be retrieved inside the click-callback via this.getPosition())
Note: instead of using your predefined waypoints you better parse the route returned by the directionsService to place the custom markers at the exact positions(these may differ from your predefined waypoints)
I want to draw marker on google maps. The marker data is from JSON.(from json file, not from database) and all data have a geometry (latitude, longitude)
An important thing is when I drag google maps, the browser will show some boundary.
And then the markers have to show on only shown maps.
After drag map again, the marker resets and show new marker in new boundary.
google.maps.event.addListener(map, 'dragend', function(event) {
var bd = map.getBounds();
var ne = bd.getNorthEast();
var sw = bd.getSouthWest();
var nw = new google.maps.LatLng(ne.lat(), sw.lng());
var se = new google.maps.LatLng(sw.lat(), ne.lng());
I can not progress any more..
Please give some example url or help..
So you've got the points for the 4 corners of some kind of boundary, and you want to put a marker in there. So you have a bunch of markers, but you only want to plot the ones that fall within the current bounds.
So something like this might work:
var latlng = new google.maps.LatLng(54.42838,-2.9623);
var marker = new google.maps.Marker({
position: latlng,
});
if (bd.contains(latlng)) {
marker.setMap(map);
}
You might want to setMap(null) for any markers that fall outwith the bounds.
I'm working with Google Maps v3 and I use the MarkerManager to hide the markers on a certain zoom level. I bind circle objects to these markers. Anyway, they aren't hided when the markers are. How can I bind the circles to hide with the markers?
The binding:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
});
var circle = new google.maps.Circle({
map: map,
radius: 50,
});
circle.bindTo('center', marker, 'position');
Array.push(marker);
Did you solved your problem? If not add this:
circle.bindTo('map', marker);