So i have several markers appearing from an array, but i'm having a lot of difficulty setting the content of the InfoWindows that appear
I put the titles in which works great, but when I try to set the content, it doesn't set the content, but still shows the title.
What am I doing wrong?
for (index = 0; index < data.length; ++index) {
locationName = data[index].LocationName;
locationID = data[index].LocationID;
locationX = data[index].XCord;
locationY = data[index].YCord;
var infoContent = '<div><h3>' + data[index].LocationName + '</h3></div><div>' + data[index].LocationID + '</div>';
var mapLocation = new google.maps.LatLng(locationX,locationY);
var marker = new google.maps.Marker({ // Set the marker
position: mapLocation, // Position marker to coordinates
icon: image, //use our image as the marker
map: map, // assign the marker to our map variable
title: data[index].LocationName,
content: infoContent
//draggable:true //Have a guess what this does
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function (marker, index) {
return function () {
infoWindow.setContent(infoContent);
infoWindow.setContent(this.title);
infoWindow.open(map, this);
}
})(marker, index));
var infoWindow = new google.maps.InfoWindow({
content: infoContent
}), marker, index;
}
You are calling setContent twice:
infoWindow.setContent(infoContent);
infoWindow.setContent(this.title);
I guess the last one should be removed.
Edit:
To get the correct infoWindow content, try moving the creation of the eventListener to a function:
// Allow each marker to have an info window
updateInfoWindowOnMarkerClick(marker, infoContent);
//Somewhere after the loop
function updateInfoWindowOnMarkerClick(marker, infoContent){
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(infoContent);
infoWindow.open(map, this);
});
}
Have a look at JavaScript closure inside loops – simple practical example for more information about function scope.
Related
I have multiple markers and currently when more than one infoWindow is clicked, the other already-opened infoWindows stay open, cluttering the map. I would prefer it if I could simply reuse a single infoWindow, move it and update it's content. This is what I am attempting to do below:
var info = new SnazzyInfoWindow ();
/*
* Loop through each item in the 'features' array, including info windows, and display the marker
*/
features.forEach(function (feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
var infoContent = feature.contentImage + feature.content;
marker.addListener('click', function() {
infoCallback(infoContent, marker);
});
});
function infoCallback(infoContent, marker) {
return function() {
info.close();
info.setContent(infoContent)
info.open(map, marker);
};
};
However I am receiving the error Cannot read property 'placement' of undefined and can't seem to figure out what's wrong here.
Note that I am using the "Snazzy Info Window" plugin, but I think the same would apply to the stock infoWindow.
Yes. Inside the onClick function, when marker.addListener('click' is being executed, you don't have feature/marker. The variables are not what they were when the foreach was executed.
One trick I mostly use, is to make an array of the marker objects. Inside the onClick you search for the 'this' marker inside the array.
Something like this:
var markers = []; // store the markers in this array
features.forEach(function (feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
markers.push(marker);
marker.addListener('click', function() {
// first find out which marker was clicked on
var index = markers.indexOf(this); // this represents the marker that was clicked on
// index should be the same index as the index for features.
var feature = features[index];
var marker = markers[index];
var infoContent = feature.contentImage + feature.content;
// now we can call infoCallback.
infoCallback(infoContent, marker);
});
});
I'm having a google map where google markers are put up. The placement of markers works well. But if I click a marker, the adress should open up in an infowindow. The adress, longtitude and latitude are loaded from model.js into the variable myLocations.
EDIT: Currently a click on any marker returns the adress of the last object in myLocations. But I would like to get the myLocations.adress of the one who was clicked.
var markerspots;
var spot;
var j;
for (j = 0; j < myLocations.length; j++){
spot = {
lat: parseFloat(myLocations[j].lati),
lng: parseFloat(myLocations[j].long)
};
contentString = myLocations[j].adress;
markerspots = new google.maps.Marker({
position: spot,
map: map,
icon: markerspot,
content: contentString,
id: j
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(markerspots, "click", (function(marker) {
return function(evt) {
infowindow.setContent(contentString);
infowindow.open(map, markerspots);
}
})(markerspots));
}
I have found lots of solutions, but I don't understand any of those. So how can I make the content of the clicked marker show up in an infowindow?
Thanks
Well you are accessing your contentString, which is set to the last one you created in your for loop.
What you really want is the content property of the marker you clicked on, which is stored in this.
So
google.maps.event.addListener(markerspots, 'click', function() {
console.log(this.content);
});
should do the trick.
Example here: https://jsfiddle.net/4tpnh00u/
I load an array of markers from a JSON string. The JSON string contains marker location and information that needs to be displayed on each marker's popup.
I have the following code
function AddAllMarkers(markersJSON){
var tempArray = JSON.parse(markersJSON);
infoWindow = new google.maps.InfoWindow();
for(var i = 0; i < tempArray.Locations.length; i++){
var obj = tempArray.Locations[i];
var point = new google.maps.LatLng(obj.Latitude, obj.Longitude);
var contentString = <!--CONTENT STRING GETS SET HERE PER MARKER-->;
var markerTemp = new google.maps.Marker({
position: point,
icon:obj.Icon
});
google.maps.event.addListener(markerTemp, 'click', function() {
infoWindow.close();
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(contentString);
infoWindow.open(map, this);
});
markerArray.push(markerTemp);
}
}
When this function gets called I load all the markers correctly but all markers show the popup of the last marker loaded. What am I doing wrong? I did try moving the declaration of infoWindow around but either that does not solve the problem or it causes multiple balloons to be opened at the same time.
How can I solve this?
The reason for the observed behavior is that at the time the event listener function is executed - that is at the time of a mouse click - the loop has finished. Therefore, the contentString variable will hold the value from the last loop iteration.
As a workaround you could attach the content string to the marker itself and access it using the this reference within the event handler.
function AddAllMarkers(markersJSON){
var tempArray = JSON.parse(markersJSON);
infoWindow = new google.maps.InfoWindow();
for(var i = 0; i < tempArray.Locations.length; i++){
var obj = tempArray.Locations[i];
var point = new google.maps.LatLng(obj.Latitude, obj.Longitude);
var contentString = <!--CONTENT STRING GETS SET HERE PER MARKER-->
var markerTemp = new google.maps.Marker({
position: point,
icon:obj.Icon
});
markerTemp.contentString = contentString;
google.maps.event.addListener(markerTemp, 'click', function() {
infoWindow.close();
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(this.contentString);
infoWindow.open(map, this);
});
markerArray.push(markerTemp);
}
}
This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 9 years ago.
Using a loop to show markers on Google Maps, I am finding that previous windows wont close even though I have a listener
Here is my code (set to limit number to 50 deliberately) that displays a marker if a user has location info set
function loadGmodule() {
var map = new google.maps.Map(
document.getElementById('gmashup'), {
center: new google.maps.LatLng(20, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var i=0;i<50;i++) {
u = users[i];
if (u.lat) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(u.lat, u.lang),
map: map
});
infoContent[i] = '<table ><tr><td><img src=\"'+u.avatar+'\" width=\"60\" height=\"75\"></td>';
infoContent[i] = infoContent[i] + '<td><b>'+u.firstname+' '+u.middlename+' '+u.lastname+'</b><br />'+u.designation + '<br />'+u.company+'<br />'+u.city+'</td>';
infoContent[i] = infoContent[i] + '</tr></table>';
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(infoContent[i]);
addInfoWindowOnEvent(marker, infoWindow, map, 'click');
}
}
}
and the function / listener
function addInfoWindowOnEvent(marker, infoWindow, map, event) {
google.maps.event.addListener(marker, event, function () {
infoWindow.close();
infoWindow.open(map, marker);
});
}
Can anyone advise the best location to put the infoWindow.close() so that previous windows will shut when another pin is clicked.
Thanks in advance for any assistance
Even though the edited indicated a duplicate, it was not to be found in the supplied link.. HOWEVER (even though I think this is a hack, but it will do) there was an answer here which worked
Google Maps API v3 (one infowindow open at a time)
I changed my function to
function addInfoWindowOnEvent(marker, infoWindow, map, event) {
google.maps.event.addListener(marker, event, function () {
if($('.gm-style-iw').length) {
$('.gm-style-iw').parent().remove();
}
infoWindow.open(map,marker);
});
}
and now only one window stays open
For each marker you are creating new infowindow. If you want to close previous infowindow and have only one opened then it is enough to create only one infowindow. It should be global:
var infoContent = [];
var infoWindow;
function loadGmodule() {
var map = new google.maps.Map(
...
infoWindow = new google.maps.InfoWindow();
//for (var i = 0; i < 50; i++) {
for (var i = 0; i < users.length; i++) {
...
and then provide specific content to event listener:
...
infoContent[i] = infoContent[i] + '</tr></table>';
//infoWindow = new google.maps.InfoWindow();
//infoWindow.setContent(infoContent[i]);
addInfoWindowOnEvent(marker, infoContent[i], map, 'click');
}
}
}
function addInfoWindowOnEvent(marker, infoContent, map, event) {
google.maps.event.addListener(marker, event, function () {
infoWindow.close();
infoWindow.setContent(infoContent)
infoWindow.open(map, marker);
});
}
I have implemented a google map with multiple markers but what i am failing to do is how to add a unique label for each marker i.e. Each marker needs have a letter:e.g.
Marker 1 needs to display 'A'
Marker 2 needs to display 'B'
Marker 3 needs to display 'C'
Marker 4 needs to display 'D'
...
an example of what i am trying to achieve is: http://www.athenos.com/locator/ --- enter 11205 in the zip search
here is a portion of my map code - my init and add_marker methods:
init : function() {
var self = this;
// set map property
var map = new google.maps.Map(self.dom_element, self.options);
self.map = map;
// set some other shit
new google.maps.Size(95, 77),
new google.maps.Point(0,0),
new google.maps.Point(47, 76);
// creating new bounds
var bounds = new google.maps.LatLngBounds();
// for loop to iterate through locations
for (var i = 0; i < self.locations.length; i++) {
// extend the bounds
bounds.extend(self.locations[i].latlng);
// add the marker
self.add_marker(self.locations[i].latlng, i);
}
// centers the map based on the existing map markers
self.map.fitBounds(bounds);
},
add_marker : function(latlng, marker_index) {
var self = this;
var marker = new google.maps.Marker({
position: latlng,
map: self.map,
icon: self.map_icon,
zIndex: 998,
id: marker_index // give the marker an ID e.g. 0, 1, 2, 3 - use this for indexing the listed venues
});
google.maps.event.addListener(marker, 'mouseover', function(event) {
var this_marker = this;
// executes handler and passes the marker as 'this' and event data as an argument
self.handle_marker_mouseover.call(self, this, event);
this_marker.setZIndex(999);
});
google.maps.event.addListener(marker, 'mouseout', function(event) {
// executes handler and passes the marker as 'this' and event data as an argument
self.handle_marker_mouseout.call(self, this, event);
});
google.maps.event.addListener(marker, 'click', function(event) {
// executes handler and passes the marker as 'this' and event data as an argument
self.handle_marker_click.call(self, this, event);
});
},
...
Please help.
Thanks in advance
just try to locate your icon, in marker's prop, at this url:
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|00FF00|000000
So iterate with letters over the first part of the chld querystring parameter, and don't forget to choose your marker's color (latest two part, pipe separated)
Take a look at the article below. It's very simple. Use a marker with numeric labels or a marker with alphabet label (A,B..)
Multiple marker with labels in google map
for (i = 1; i <= markers.length; i++) {
var letter = String.fromCharCode("A".charCodeAt(0) + i - 1);
var data = markers[i - 1]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
Go to this article for more details
Multiple marker with labels in google map