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.
Related
Everything works fine with InfoWindow on markers and marker clusters, except all markers and marker clusters can't trigger when page load.
This is my code so far. (See my JSFiddle)
How do I trigger a click event on all markers and marker clusters by default?
I added google.maps.event.trigger(marker, 'click') but it didn't work.
What do I need to change in the initialize function to make this work?
e.g. https://jsfiddle.net/jacobgoh101/7Lg1q5fL/7/
The problem is that there is only one infoWindow variable. Whenever you click the marker, it overwrite the previous infoWindow. So there can only be 1 infoWindow at a time.
Therefore, you gotta create multiple infoWindow variable, and set them immediately after you init the markers, not after click.
for (i = 0; i < clusterMarkers.length; i++) {
var marker = clusterMarkers[i];
var newInfoWindow = new google.maps.InfoWindow();
newInfoWindow.setContent("<a target=\'_blank\' href=\'" + marker.getTitle() + "\'>" + marker.getTitle() + "</a><br />" + marker.content + "kWh");
newInfoWindow.open(gm_map, marker);
infoWindowArray.push(newInfoWindow);
// ...........
}
(Your code is a bit messy so I only edit the necessary part to give you the idea. Hope this is enough for you to build on top of.)
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 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"
I have trouble with my google map script where the markers on a same location overlapped and not visible to user. I tried to edit my script using OverlappingMarkerSpiderfier available in this link https://github.com/jawj/OverlappingMarkerSpiderfier. But overlapping issue exist.No improvement occured.
The below function binds a popup window with marker.I have edited the function to remove overlapping of markers in the same location using OverlappingMarkerSpiderfier.
function bindInfoWindow(marker, map, infoWindow, contentString)
{
var oms = new OverlappingMarkerSpiderfier(map);
oms.addMarker(marker);
oms.addListener(marker, 'mouseover', function() {
infoWindow.setContent(contentString);
infoWindow.open(map, marker);
$("#tabs").tabs();
});
}
// highlighting a marker
Below is the jsfiddle link of my edited google map.Please show me where iam doing wrong.
http://jsfiddle.net/7AKuX/11/
You create a new oms-instance for each marker, use the same instance for all markers instead:
http://jsfiddle.net/5VFeJ/
Google map developer api provide clustering method to see overlapped markers and its contents. Refer to this link, or else use OverlappingMarkerSpiderfier.
I may be asking the same question as Similar q, but I'm not sure!
Basically I have code to add markers to a Google map. Then an infowindow displays.
How can I put a form in here that has elements binding to the scope of a module?
Angular is running ok on the rest of the page (I have a simple expressions to test this), but it's not running in the form as {{text}} never changes.
var html =
"<form id=\"markerInput\" ng-controller=\"markerCtrl\">"+
"<input ng-model=\"text\">{{text}}</form>";
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
});
I know this is an old question but I recently come across this problem and had trouble finding relevant info so it can definately help somebody out there, I fixed it using .$apply to read more please visit this link http://jimhoskins.com/2012/12/17/angularjs-and-apply.html