I am drawing a set of Polygons on to Google Maps and would like to have an InfoWindow pop up at the center of each when I click on it.
function attach_info_window(polygon, centroid, title){
var info_window = new google.maps.InfoWindow({
content: title,
position: { lat: centroid[0], lng: centroid[1] }
});
google.maps.event.addListener(polygon, 'click', function() {
info_window.open(map, this);
});
}
The problem is, the window shows up in the NW corner every time. The 'position' parameter seems to be ignored completely. I also tried setting the position on click with
event.latLng
But that returns undefined, even though the API docs specify it, so that doesn't work either. Curiously, it works just fine if I use a Marker instead of the Polygons.
I solved this by removing the second argument in open()
info_window.open(map)
works great. I was passing "this" in order to bind it to that specific polygon among many. I still don't understand why this works, and neither
info_window.open(map, poly)
nor
info_window.open(map, this)
works
This:
info_window.open(map, this);
Will not work for anything but a google.maps.Marker. The second argument of InfoWindow.open can only be a google.maps.Marker, a Polygon or Polyline won't work there.
from the documentation
"In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property"
Related
I am using Google Maps API v3.0
The map have MULTIPLE markers (so any examples of using 1 marker isnt what I am after)
Things are going ok so far.. but I am not clear on how you can save a reference to a specific marker when it is clicked? (which I have read as a suggestion few places, but no examples)
There are two separate instances where I would like to have a direct target/reference back to a specific marker to control/change the behavior/image..etc (whatever).
Example of scenario #1:
1.) When I click on a marker, I am currently 'bouncing it' as well as changing its icon to a different image. If I click on a new marker.. I want to target the OLD marker to stop bouncing/revert back to old icon. I have accomplished this by running a loop over my 'marker' array and stop all animations on all markers.. and changing all icons to the old (original) image. It works.. but I would like NOT to have the overhead of running through the loop. Going forward, I would like to change the old marker to a 3rd icon image.. (to show it has been interacted with before).. so I need a way to save/set a reference to a marker once it is clicked.. so I can target it again (directly)
Example of scenario #2:
1.) I have some 'controls' (elements) outside of the map, that I would like to use to interact with the map, as well as specific markers.
ie: Have an image of the marker/entry OUTSIDE of the map.. where a user clicks on it.. and it scrolls/pans the map to that specific marker (as well as changing animation and icon image)
Here is my current click listener:
google.maps.event.addListener(addr[n], 'click', (function(marker, n) {
return function() {
infowindow.setContent(addr[n].title + "<br />" + addr[n].company + "<br />" + addr[n].workphone);
infowindow.open(map, addr[n]);
//increase z-index when marker has focus
addr[n].setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
}
})(marker, n));
Q:
How can I save a DIRECT reference to a marker on the map when it is clicked, to be used in another function and referenced there?
In response to MuffinMan:
Thanks... I'm still not clear though, at least as to how it relates to my project.
I -am- saving things into an array already. (addr[n] from above)
Here is the class method that is building my addr[n] array for me:
public static function GMapMarker($markerId, $memberObject, $addressObject){
$marker = 'var m_'.$memberObject->Id.'_'.$addressObject->AddressNum.' = new google.maps.LatLng('.$addressObject->Lat.','.$addressObject->Lon.');
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: m_'.$memberObject->Id.'_'.$addressObject->AddressNum.',
title:"'.addslashes($memberObject->Full_Name).'",
company:"'.addslashes($memberObject->Company).'",
icon:"marker_gd.php?m=' . $markerId . '",
markerid:"'.$markerId.'",
id:"'.addslashes($memberObject->Id).'",
addressnum:"'.addslashes($addressObject->AddressNum).'",
refid:"m_'.$memberObject->Id.'_'.$addressObject->AddressNum.'",
workphone:"'.addslashes($memberObject->Work_Phone).'",
zIndex: '. (100 - preg_replace('/\D/','', $markerId)) .'
});
addr.push(marker);';
return $marker;
}
I have no way of knowing what order/index in the array that particular marker is. However I do have the unique name given and that markers lat/lon coords....
But I am NOT clear how to use it to target a marker later on?
Here's what I used in my implementation:
var markers = [];
for (var index = 0; index < data.length; index++) {
var latlng = new google.maps.LatLng(data[index].lat, data[index].lng);
var marker = new google.maps.Marker({position: latlng, map: map, title: data[index].label, icon: 'images/dot.gif'});
google.maps.event.addListener(marker, 'click', function() {
markers.push(marker); /* marker saved here for later reference*/
});
}
markers[] is populated with the markers you want for later use. E.g. markers[0].
You can add other listeners that javascript supports to handle other events on the marker, such as dragging and hovering.
I have some code in the below example that works great - but!
The looping for function doesnt work when it comes to the infowindow. You'll notice that if you click on either map icon the same link "name2" shows up. I need this to loop and change the information correctly eg: "name1" for the first map marker and "name2" for the second.
I'm probably missing something simple!?
http://jsfiddle.net/bTujZ/565/
var infowindow = new google.maps.InfoWindow({ content: marker.url });
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
Thanks
You have to read up on Javascript Closures
Meanwhile, here is your fiddle fixed: http://jsfiddle.net/bTujZ/566/
All you had to do was create a closure inside if your loop using an anonymous (function(){})().
You are using only one infowindow for all markers.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
From your code when marker is clicked, it looks up infowindow in memory, which is the one created at the end of your loop.
Thus, you are seeing all the same infowindow for all markers.
If you want to see different infowindow, instantiate it inside addListenter function. Or, you can set infowindow contents of infowindow inside the addListener function.
I am developing an application which uses google maps api v3 to show markers and infowindows.
Well, I have N markers stored within an array and a global infowindow used to show some information.
The infowindow contents are shown simply by clicking a marker, created in this way:
/* global js stuff */
var g_map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var g_current_popup = new google.maps.InfoWindow({ content: "" });
var g_markers = [];
/* create marker function */
function addMarker(p_infowindow_contents)
{
var l_marker = new google.maps.Marker( all the stuff needed );
google.maps.event.addListener(l_marker, 'click', function()
{
g_current_popup.close(); // if already open, it must be closed and reloaded
g_current_popup.setContent(p_infowindow_contents);
g_current_popup.open(g_map, l_marker);
});
g_markers.push(l_marker);
}
Everything works as expected, except for a little graphical glitch: when the infowindow is appearing, I see the infowindow 'tip' positioned at an unknown location for a tenth of a second, then it disappears and I see the correct infowindow.
Look at this screenshot took just before the tip disappears:
Does anyone experienced something like this?
Could it be some CSS issue?
Thanks
It does not look like this is a problem with your code, I think it more likely a browser issue. I was able to validate the same thing looking at the infowindow example that Google provides in Firefox, but not in Chrome:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
it seems to happen more visibly when the map has to scroll to fit the infowindow, but I would say that it is not a requirement for it to do so. It is likely just an artifact with the screen taking a few clock cycles to catch up with the DOM.
I wish to center a google map by clicking on a div within the page that is not part of the map. I tried this but it did not work
$('#myDiv').click( function() {
map.panTo(36.549362,-98.613281);
});
and i also tried this
$('#myDiv').click( function() {
map.setCenter(36.549362,-98.613281);
});
I think it should be something like:
$('#myDiv').click( function() {
map.setCenter(new GLatLng(36.549362,-98.613281));
});
ie. you have to make a LatLng object first and pass that, instead of the raw coordinates.
I don't know what version of GMaps you're using but check the documentation.
v3 Map doc, here you can see setCenter takes a LatLng.
You have to set is up as a new LatLng
var point = new google.maps.LatLng(36.549362,-98.613281);
$('#resetMapDiv').click( function(event) {
map.panTo(point);
});
I have a Google v3 Map with a UI element that overhangs the top of it like so…
And I have an info window attached to multiple markers. The problem I have is that when the infowindow opens and auto-pans to be visible within the map (behaviour I want), it obviously takes no account of the element overhang…
…so the user has to manually pan to see all the info clearly or get at the close box.
I've looked to see if there is a way I can get the offsetTop of the infowindow from its parent map, so I can add an extra panTo nudge when necessary, but I'm stumped.
Attempts such as…
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map, marker);
var infoTop = infowindow.offsetTop;
console.log(infoTop);
});
…just give me undefined.
What would be great is to be able to set a clearance property on the infowindow, as is possible with the infoBoxClearance property of the InfoBox utility. But I don't want to use InfoBox because there are stylistic aspects of the standard infowindow I prefer.
And I would prefer not to have the map pan more than is necessary by using disableAutoPan and calculating an optimal panTo for each marker.
Any suggestions?
I haven't tried this in Version 3, but in Version 2 the standard solution is to create a custom control on the map. The [v2] infoWindow avoids all controls, including custom controls. Your custom control could simply be an empty space covered by your external UI.
http://code.google.com/apis/maps/documentation/javascript/controls.html#CustomControls