I have some code to display a Google map for the location (36.7771592941268,3.0516744005553846) with a marker at this location. I create the marker with this location, the problems is that the marker shows up in the wrong place.
var latlng = new google.maps.LatLng(36.7771592941268,3.0516744005553846);
var marker= new google.maps.Marker({
position: latlng,
clickable: true,
draggable: true,
map: map
});
To demonstrate, when I put my coordinates (36.7771592941268, 3.0516744005553846) into Google maps directly, I see the same problem. The green arrow (in the link below) is where I want my marker to appear in my code, but the marker always ends up where the red balloon is (see here).
your coordinates are obviously wrong, google shows the correct location for the given coordinates.
You need to set the anchor property of marker icon (example):
var marker = new google.maps.Marker({
position: latlng,
icon: {
path: 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z',
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32),
fillColor: 'red',
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 0,
scale: 1
},
clickable: true,
draggable: true,
map: map
});
Related
I'm able to drop markers on the map in the click eventhandler. But if a circle has already been drawn on the map where the user wants to put a marker, it doesn't work. I assume the circle is "swallowing" the click and not passing it through to the map beneath. How to fix that?
When you draw the circle, set clickable: false in the circle options, and then clicks will go through to the underlying map. For example:
new google.maps.Circle({
clickable: false, // let clicks go through to the map
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng( 0, 0 );
radius: 1000
});
Or add a click listener to the circle to create markers over it.
I have the following code to add a marker to my map:
var marker = new google.maps.Marker({
icon: '/pin.png',
map: map,
position: latlng,
draggable: false,
title: trip_name,
animation: google.maps.Animation.DROP
});
Everything works fine except the icon pops up for a split second before running the animation. Has anyone else encountered this problem?
I was experiencing this same behavior and I found that further defining the custom icon helped fix this issue.
var image = {
url: 'images/map_marker.png',
// This marker is 20 pixels wide by 30 pixels tall.
size: new google.maps.Size(20, 30),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the image at 0,30.
anchor: new google.maps.Point(10, 30)
};
var marker = new google.maps.Marker({
icon: image,
map: map,
position: latlng,
draggable: false,
title: trip_name,
animation: google.maps.Animation.DROP
});
I'm trying draw polygon arrow using Google Map APT V3. See code below. The problem is when I zoom out the map arrow head remain same. Any way to adjust the zoom level of arrow head?
var myCoordinates = [
new google.maps.LatLng(54.065836, -7.415771),
new google.maps.LatLng(53.219191, -7.261963)
];
var polyOptions = {
path: myCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
, icons: [{ icon: { path: google.maps.SymbolPath.FORWARD_OPEN_ARROW, scale: 2 }, offset: "100%"}]
}
var it = new google.maps.Polyline(polyOptions);
it.setMap(map);
You could have an event listener for the zoom_changed event on the map, which adjusts the scale property on the icon Symbol object.
When I add more Markers to Google Map with different icon types like:
...
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: "http://www.test.com/marker.png",
zIndex: 10
});
...
and
...
var resultIcon = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "black",
strokeColor: "black",
strokeWeight: 1,
};
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: resultIcon,
zIndex: 5
});
...
Than the zIndex doesn't work and the Symbol marker appears on the top.
Am I wrong with my code or how can I make the zIndex working?
You have to both specify a zIndex and add
optimized: false
to every marker constructor, eg.
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: resultIcon,
optimized: false,
zIndex: 5
})
This seems to be an issue with the new canvas based rendering of the markers.
Edit:
This really solves the issue.
One thing to mention though is that every marker has to have the "optimized: false" attribute. As long as one marker does not have it, it will not work.
Remove any of the "optimized: false" attributes from LeJared's fiddle and you will encounter the bug.
http://jsfiddle.net/BNWYq/1/
Setting zIndex of the circle to -99 seems to help: http://jsfiddle.net/rq4vs/2/
I've made a little fiddl:
http://jsfiddle.net/gSRmV/
Looks like a bug, that has to be fixed by google.
Adding optimized: false doesn't change anything.
Edit: Still looks like bug, but the two solutions from tborychowski and Codetoffel seem to work.
I am trying to display dynamic data in infowindows whenever user hovers over polygons on the map. Debugging shows the data and other infowindow/polygon settings are all right. I am able to get the color change on mouseover, just that infowindows doesn't show up. What might be the reason behind it? What am I missing here?
statePolygon = new google.maps.Polygon({
paths: stateBorderCoords,
strokeColor: '#f33f00',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#ff0000',
fillOpacity: 0.2
});
statePolygon.pId = infoText; // Fetching from a JSON response
statePolygon.wPet = wPet; // Fetching from a JSON response
statePolygon.infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(statePolygon,"mouseover",function(event){
this.setOptions({fillColor: "#00FF00"});
this.infoWindow.setPosition(event.latLng);
this.infoWindow.setContent(this.wPet);
this.infoWindow.open(map, this);
});
google.maps.event.addListener(statePolygon,"mouseout",function(){
this.setOptions({fillColor: "#FF0000"});
this.infoWindow.close();
});
google.maps.event.addListener(statePolygon, 'click', function(){
//createInfoWindow(this.pId);
});
statePolygon.setMap(map);
What happens if you leave out the "this" in the line:
this.infoWindow.open(map, this);
?
I've been fighting with something similar over the last few days and just discovered my code works for google.maps.Markers (as in Google pins) but not for google.maps.Circles (and I guess google.maps.Polygons.)
My guess: "infoWindow.open(map, object)" which tries to anchor the InfoWindow to the object only seems to work for google.maps.Markers, not Circles, Polygons, etc. What does seem to work is "open(map)" which doesn't anchor it to anything. However the position of the infoWindow has to be explicitly set (which you are already doing).
Edit:
In my case this doesn't work (assuming global variable map)
var circle = { clickable: true,
strokeColor: "darkred",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "green",
fillOpacity: 1,
map: map,
center: new google.maps.LatLng(55.95,-3.19),
radius: 45
};
var marker1 = new google.maps.Circle(circle);
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent("Hello");
inoWindow.setPosition(new google.maps.LatLng(55.95,-3.19));
infoWindow.open(map,marker1);
but this does:
var circle = { clickable: true,
strokeColor: "darkred",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "green",
fillOpacity: 1,
map: map,
center: new google.maps.LatLng(55.95,-3.19),
radius: 45
};
var marker1 = new google.maps.Circle(circle);
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent("Hello");
infoWindow.setPosition(new google.maps.LatLng(55.95,-3.19));
infoWindow.open(map);
The only difference is in the last line.
Thinking about the above post, setting the position after opening presumably overwrites the anchor position and thus makes it appear.
First you open the InfoWindow, then set its position:
http://jsfiddle.net/fuDfa/
google.maps.event.addListener(statePolygon,"mouseover",function(event){
this.setOptions({fillColor: "#00FF00"});
this.infoWindow.setContent(this.wPet);
this.infoWindow.open(map);
this.infoWindow.setPosition(event.latLng);
});
However, I realized that if the mouse moves on top of the InfoWindow (even if it's on top of the polygon), it will count as if the mouse moved outside the polygon. So, the polygon will turn red and Infowindow will close. But since the mouse is still inside the polygon, the infowindow will open again, causing a flicker.
I don't know a way to get around this (tried a timeout but it's not reliable either). I only thought about putting the Infowindow in a preset position instead of event.latLng.