Here in this small code snippet,I am facing a little problem.THe problem is if I close all the marker after page completely loaded.And again when I click on markers same detail display on all markers..Here is my code:
var map, infoBubble;
function onload() {
var mapCenter = new google.maps.LatLng(13.0162476, 77.5073893);
map = new google.maps.Map(document.getElementById('dvMap'), {
zoom: 8,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (i = 0; i < markers.length; i++) {
//icons[i];
//alert("undefined icons" + icons[i]);
var data = markers[i]
//var myLatlng = new google.maps.LatLng(13.4162691, 77.5064153);
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Par Id ' + data.ParId,
icon: 'Google Marker/In/' + data.title + '.png'
});
if (data.RANK == "1") {
data.RANK = "Primary";
} else {
data.RANK = "Secondary";
}
// alert(data.IMAGEPATH);
var contentString = '<div id="content" align="left" >' +
'<h1>Parcel Details</h1>' +
'<h3>Parcel Id:' + data.ParId + '</h3>' +
'<h3>Rank:' + data.RANK + '</h3>' +
'<h3>Captured by:' + data.Capturedby + '</h3>' +
'<h3>Captured Date:' + data.Capturedate + '</h3>' +
'</div>';
infoBubble = new InfoBubble({
maxWidth: 300,
maxHeight: 200,
backgroundColor: 'rgb(236,255,255)'
});
infoBubble.open(map, marker);
var div = document.createElement('DIV');
div.align = "left";
div.innerHTML = '<IMG BORDER="0" ALIGN="Left" width=97% height=200px alt="Pulpit rock1" SRC="' + data.IMAGEPATH + '"/>';
infoBubble.addTab('Photo', div);
infoBubble.addTab('Details', contentString);
(function (marker, data) {
google.maps.event.addListener(marker, 'click', function () {
// if (!infoBubble.isOpen()) {
infoBubble.open(map, marker);
alert("Par Id:" + data.ParId);
//alert("2");
//}
//infoWindow.open(map);
});
// alert(data.title);
//google.maps.event.trigger(marker, 'click'); //stil
}(marker, data));
}
}
google.maps.event.addDomListener(window, 'load', onload);
the infoBubble-variable will be overwritten inside the loop.
Solution: pass the infoBubble as argument to the function that adds the click-listener:
(function (marker, data , infoBubble) {
google.maps.event.addListener(marker, 'click', function () {
infoBubble.open(map, marker);
});
}(marker, data, infoBubble));
Related
I am using Google Maps API in Rails. Getting my all locations from ajax call and displaying it in for loop. I followed this link When I copy paste this
code in my file it seems to work perfectly. But when I am trying to do the same thing for my code. It keeps showing the last marker info.
jQuery(function($) {
var myCenter = new google.maps.LatLng(51.508742,-0.120850);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 5};
var map = new google.maps.Map(mapCanvas, mapOptions);
$.ajax({
url: "/list_proposals",
type: "GET",
dataType: "json",
success:function(data) {
placeMarker(map, data);
}
});
function placeMarker(map, data){
for (var i = 0; i < data.length; i++) {
var location_data = data[i];
var lat = location_data["lat"];
var long = location_data["long"];
var planting_proposal = location_data["planting_proposal"];
var proposal_id = planting_proposal["id"];
var title = planting_proposal["title"];
var photo_url = planting_proposal["main_photo"]["attachment_thumb_url"];
latlngset = new google.maps.LatLng(lat, long);
var image = {
url: window.location.origin + "/" + photo_url,
size: new google.maps.Size(50, 50),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32)
};
var marker = new google.maps.Marker({
map: map, title: title , position: latlngset, icon: image
});
map.setCenter(marker.getPosition());
var show_proposal_link = '' + title + '';
var contentString = '<div class="card text-center" style="width: 20rem;">' +
'<div class="card-block">' +
'<h4 class="card-title">'+ show_proposal_link + '</h4>' +
'<p class="card-text">' + '<img src="'+ window.location.origin + "/" + photo_url + '" width="100%;"/>' + '</p>' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
};
})(marker,content,infowindow));
}
}
});
I am new in Google Maps API. Please me help me out with it what am I doing wrong?
You should correctly implement an IIFE in your code. Please replace the google.maps.event.addListener(marker,... part of the code with the following IIFE:
(function(marker,content,infowindow) {
google.maps.event.addListener(marker,'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
})(marker,contentString,infowindow);
Proof of concept
var map;
var locations = [
{
planting_proposal: {
id: 1,
title: "Proposal 1"
},
lat: 41.386043,
long: 2.14561
},
{
planting_proposal: {
id: 2,
title: "Proposal 2"
},
lat: 41.417371,
long: 2.172115
},
{
planting_proposal: {
id: 3,
title: "Proposal 3"
},
lat: 41.399475,
long: 2.184048
}
]
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.385064, lng: 2.173403},
zoom: 12
});
placeMarker(map, locations);
}
function placeMarker(map, data){
for (var i = 0; i < data.length; i++) {
var location_data = data[i];
var lat = location_data["lat"];
var long = location_data["long"];
var planting_proposal = location_data["planting_proposal"];
var proposal_id = planting_proposal["id"];
var title = planting_proposal["title"];
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map,
title: title ,
position: latlngset
});
var show_proposal_link = '' + title + '';
var contentString = '<div class="card text-center" style="width: 20rem;">' +
'<div class="card-block">' +
'<h4 class="card-title">'+ show_proposal_link + '</h4>' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow();
(function(marker,content,infowindow) {
google.maps.event.addListener(marker,'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
})(marker,contentString,infowindow);
}
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
async defer></script>
I hope this helps!
I want to add multiple markers and infowindows that activated with a click.
I am having trouble to present the relevant infowindow of the marker, after a click the same infowindow open for all markers.
The information comes from a for loop
this is the code
function GetMarkerSuccess(results) {
results = $.parseJSON(results.d);
markers = [];
infowindows = [];
for (var i = 0; i < results.length; i++) {
var myLatLng = { lat: results[i].Latitude, lng: results[i].Longitude };
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon:'images/car.png'
});
var infowindow = new google.maps.InfoWindow({
content: "<div style='text-align:right'><h3>" + results[i].Date.substring(0, 10) + "</h3><p> התחלה: " + results[i].Starttime + " סיום: " + results[i].Endtime + "</p><p> ₪ מחיר:" + results[i].Price + "</p></div>"
});
markers.push(marker);
infowindows.push(infowindow);
listenMarker(marker);
function listenMarker(marker) {
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
}
}
function GetMarkerSuccess(results) {
results = $.parseJSON(results.d);
markers = [];
infowindows = [];
for (var i = 0; i < results.length; i++) {
var myLatLng = { lat: results[i].Latitude, lng: results[i].Longitude };
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon:'images/car.png'
});
var infowindow = new google.maps.InfoWindow({
content: "<div style='text-align:right'><h3>" + results[i].Date.substring(0, 10) + "</h3><p> התחלה: " + results[i].Starttime + " סיום: " + results[i].Endtime + "</p><p> ₪ מחיר:" + results[i].Price + "</p></div>"
});
markers.push(marker);
infowindows.push(infowindow);
listenMarker(marker);
function listenMarker(marker) {
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
}
Here is the map I am working on. I'm trying to have only one infowindow open at a time, and the open infowindow will close when the map or another marker is clicked.
I know this has been asked and answered several times already, but I've attempted to go through those examples and can't figure out how to apply them to my specific code, which pulls photos from Flickr and puts them in infowindows tied to markers. I'm pretty sure the solution involves creating a single infowindow and changing its content.
updated fiddle displaying issue
code snippet (from fiddle):
var lat = 0;
var long = 0;
$(document).ready(function() {
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=14fca78b18f8e8f4d22216494ea29abf&user_id=136688117%40N05&has_geo=1&extras=geo&format=json&jsoncallback=?", displayImages3);
function displayImages3(data) {
$.each(data.photos.photo, function(i, item) {
lat = item.latitude;
lng = item.longitude;
var photoURL = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
var linkURL = 'https://www.flickr.com/photos/' + item.owner + '/' + item.id + '';
htmlString = '<img src="' + photoURL + '">';
var contentString = '<div id="content">' + htmlString + '</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var myLatlngMarker = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: myLatlngMarker,
map: myMap
});
marker.setIcon('https://www.sherrihill.com/static/skin/images/pinkdot_pink-dot.png');
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(myMap, marker);
});
});
}
});
var myLatlngCenter = new google.maps.LatLng(46.140743, -116.682910);
var mapOptions = {
center: myLatlngCenter,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<title>Cascadia Panamericana</title>
<div id="map_canvas"></div>
Make a single infowindow in the global scope. Re-use it to display the content for each marker. In this example I add the HTML content for the infowindow as a property of the marker, then access it in the marker click event listener with this.htmlContent.
var contentString = '<div id="content">' + htmlString + '</div>';
var myLatlngMarker = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: myLatlngMarker,
map: myMap,
icon: 'https://www.sherrihill.com/static/skin/images/pinkdot_pink-dot.png',
htmlContent: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.htmlContent);
infowindow.open(myMap, this);
});
working code snippet:
var lat = 0;
var long = 0;
var infowindow = new google.maps.InfoWindow({});
$(document).ready(function() {
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=14fca78b18f8e8f4d22216494ea29abf&user_id=136688117%40N05&has_geo=1&extras=geo&format=json&jsoncallback=?", displayImages3);
function displayImages3(data) {
$.each(data.photos.photo, function(i, item) {
lat = item.latitude;
lng = item.longitude;
var photoURL = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
var linkURL = 'https://www.flickr.com/photos/' + item.owner + '/' + item.id + '';
htmlString = '<img src="' + photoURL + '">';
var contentString = '<div id="content">' + htmlString + '</div>';
var myLatlngMarker = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: myLatlngMarker,
map: myMap,
icon: 'https://www.sherrihill.com/static/skin/images/pinkdot_pink-dot.png',
htmlContent: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.htmlContent);
infowindow.open(myMap, this);
});
});
}
});
var myLatlngCenter = new google.maps.LatLng(46.140743, -116.682910);
var mapOptions = {
center: myLatlngCenter,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<title>Cascadia Panamericana</title>
<div id="map_canvas"></div>
I am having a problem where the google maps will start to slow down and crash after playing around with the draw area function (bottom of page). Wanted to know if I have missed something or I have something in there which is causing it to crash?
var map;
var weatherDisplayIsOn = false;
var markers = [];
var cArea;
function initialize() {
var myLatlng = new google.maps.LatLng(51.488651, -0.063232);
var newYork = new google.maps.LatLng(40.719967, -74.009893);
var paris = new google.maps.LatLng(48.857278, 2.352210);
var london = new google.maps.LatLng(51.519670, -0.125631);
var towerBridge = new google.maps.LatLng(51.506231, -0.075356);
var mapOptions = {
center: myLatlng,
zoom: 8,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var Home = '<div id="content" align="center">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">Home</h1>' +
'<div id="bodyContent">' +
'<p><b>Home</b>, the buidling I had spent the last 13 years living ' +
'in with the locality of Primary Schools, Secondary and Localised ' +
'public transport ' +
'</p>' +
'</div>' +
'</div>';
var infoHome = new google.maps.InfoWindow({
content: Home
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title: 'Homeland'
});
google.maps.event.addListener(marker, 'click', function() {
infoHome.open(map, marker);
});
var NewYork = '<div id="content" align="center">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">New York</h1>' +
'<div id="bodyContent">' +
'<p><b>New York</b>, often called New York City or the City of New York to distinguish ' +
'it from the State of New York, of which it is a part of the most populous city ' +
'in the United States and the center of the New York metropolitan area, the premier gateway for' +
'legal immigration to the United States and one of the most populous urban agglomerations in the world.' +
'</p>' +
'<iframe width="560" height="315" src="https://www.youtube.com/embed/MtCMtC50gwY?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>' +
'</p>' +
'</div>' +
'</div>';
var nyInfo = new google.maps.InfoWindow({
content: NewYork
});
var marker1 = new google.maps.Marker({
position: newYork,
map: map,
animation: google.maps.Animation.DROP,
title: 'New York'
});
google.maps.event.addListener(marker1, 'click', function() {
nyInfo.open(map, marker1);
});
var Paris = '<div id="content" align="center">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">Paris, France</h1>' +
'<div id="bodyContent">' +
'<p><b>Paris</b>, is the capital and most populous city of France. ' +
'Situated on the Seine River, in the north of the country, it is in the centre of the ' +
'Ile-de-France region, also known as the region parisienne.' +
'</p>' +
'<iframe width="560" height="315" src="https://www.youtube.com/embed/hWo-43ObCP8" frameborder="0" allowfullscreen></iframe>' +
'</div>' +
'</div>';
var parisInfo = new google.maps.InfoWindow({
content: Paris
});
var marker2 = new google.maps.Marker({
position: paris,
map: map,
animation: google.maps.Animation.DROP,
title: 'Paris'
});
google.maps.event.addListener(marker2, 'click', function() {
parisInfo.open(map, marker2);
});
var London = '<div id="content" align="center">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">London, United Kingdom</h1>' +
'<div id="bodyContent">' +
'<p><b>London</b>, is the capital city of England and the United Kingdom.' +
'It is the most populous city in the United Kingdom, with a metropolitan area of over ' +
'13 million inhabitants. ' +
'</p>' +
'<iframe width="560" height="315" src="https://www.youtube.com/embed/45ETZ1xvHS0?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>' +
'</div>' +
'</div>';
var londonInfo = new google.maps.InfoWindow({
content: London
});
var marker3 = new google.maps.Marker({
position: london,
map: map,
animation: google.maps.Animation.DROP,
title: 'London'
});
google.maps.event.addListener(marker3, 'click', function() {
londonInfo.open(map, marker3);
});
var TowerBridge = '<div id="content" align="center">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">Tower Bridge,London</h1>' +
'<div id="bodyContent">' +
'<p><b>Tower Bridge</b>, is the capital city of England and the United Kingdom.' +
'It is the most populous city in the United Kingdom, with a metropolitan area of over ' +
'13 million inhabitants. ' +
'</p>' +
'<iframe width="560" height="315" src="https://www.youtube.com/embed/45ETZ1xvHS0?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>' +
'</div>' +
'</div>';
var towerBridgeInfo = new google.maps.InfoWindow({
content: TowerBridge
});
var marker4 = new google.maps.Marker({
position: towerBridge,
map: map,
animation: google.maps.Animation.DROP,
title: 'Tower Bridge'
});
google.maps.event.addListener(marker4, 'click', function() {
towerBridgeInfo.open(map, marker4)
});
weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.CELCIUS
});
google.maps.event.addDomListener(document.getElementById('weather'), 'click', toggleWeather);
};
google.maps.event.addDomListener(window, 'load', initialize);
function setRoad() {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
}
function setHYB() {
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
}
function zoomTo() {
var lat = prompt("Enter your latitude");
var lng = prompt("Enter your longtitude");
map.panTo(new google.maps.LatLng(lat, lng));
}
function zoomIn() {
var currentZoomLevel = map.getZoom();
if (currentZoomLevel != 21) {
map.setZoom(currentZoomLevel + 1);
}
}
function zoomOut() {
var currentZoomLevel = map.getZoom();
if (currentZoomLevel != 21) {
map.setZoom(currentZoomLevel - 1);
}
}
function toggleWeather() {
if (weatherDisplayIsOn) {
weatherLayer.setMap(null);
weatherDisplayIsOn = false;
}
else {
weatherLayer.setMap(map);
weatherDisplayIsOn = true;
}
}
function addMarker(myLatlng) {
var customMarker = new google.maps.Marker({
position: myLatlng,
map: map
});
markers.push(customMarker);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
function clearMarkers() {
setAllMap(null);
}
function showMarkers() {
setAllMap(map);
}
function deleteMarkers() {
clearMarkers();
markers = [];
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
function drawArea()
{
var points = new google.maps.MVCArray();
var endPoint = new google.maps.LatLngBounds();
cArea = new google.maps.Polygon({
path: points,
strokeOpacity: 0.7,
strokeWeight: 2,
fillOpacity: 0.2,
fillColor: "#FF0000"
});
cArea.setMap(map);
google.maps.event.addListener(map, 'click', function(e)
{
var path = cArea.getPath();
path.push(e.latLng);
endPoint.extend(e.latLng);
addMarker(e.latLng);
});
}
function deleteArea(){
cArea.setMap(null);
}
You have this function:
function addMarker(myLatlng) {
var customMarker = new google.maps.Marker({
position: myLatlng,
map: map
});
markers.push(customMarker);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
In which you define an event listener for map clicks, which calls... the addMarker function... which defines an event listener for map clicks, which calls... the addMarker function... which defines an event listener for map clicks,... etc etc ad infinitum.
In other words, the error is probably too much recursion.
And to cap it all, you also define the same event listener elsewhere too:
google.maps.event.addListener(map, 'click', function(e)
{
var path = cArea.getPath();
path.push(e.latLng);
endPoint.extend(e.latLng);
addMarker(e.latLng);
});
Although this seems to be in a function ('drawArea') that isn't called from anywhere.
Just move this outside of the addMarker function, to wherever you create the map:
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
I am making a google maps for my website so you can view where each user is.
This works perfect only when you click on an icon of someone it will show you the same every time i cant understand it am i doing something wrong?
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","includes/xml.php",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("USER");
var infoWindow = new google.maps.InfoWindow();
var map;
var users = [];
function initialize() {
var mapOptions = {
zoom: 9,
center: new google.maps.LatLng(52.1424, 5.09428),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
for (i=0;i<x.length;i++) {
var id = x[i].getElementsByTagName("USERID")[0].childNodes[0].nodeValue;
users['USERNAME'+id] = x[i].getElementsByTagName("USERNAME")[0].childNodes[0].nodeValue;
users['CITY'+id] = x[i].getElementsByTagName("CITY")[0].childNodes[0].nodeValue;
users['COUNTRY'+id] = x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue;
users['IMAGE'+id] = x[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue;
users['IMAGEPIN'+id] = x[i].getElementsByTagName("IMAGEPIN")[0].childNodes[0].nodeValue;
users['LAT'+id] = x[i].getElementsByTagName("LAT")[0].childNodes[0].nodeValue;
users['LONG'+id] = x[i].getElementsByTagName("LONG")[0].childNodes[0].nodeValue;
users['DATETIME'+id] = x[i].getElementsByTagName("DATETIME")[0].childNodes[0].nodeValue;
users['TWITTER'+id] = x[i].getElementsByTagName("TWITTER")[0].childNodes[0].nodeValue;
users['FA'+id] = x[i].getElementsByTagName("FA")[0].childNodes[0].nodeValue;
users['ACTIVEUSER'+id] = x[i].getElementsByTagName("ACTIVEUSER")[0].childNodes[0].nodeValue;
users['myLatlng'+id] = new google.maps.LatLng(users['LAT'+id],users['LONG'+id]);
users['content'+id] = '<div style="width:220px;"><img id="avatar"style="margin-right: 5px;" src="' + users['IMAGE'+id] + '"></img>' +
'<b>' + users['USERNAME'+id] + '</b><br />' +
users['CITY'+id] + '<br />' + users['COUNTRY'+id] + '<br />' +
'<i>' + users['DATETIME'+id] + '</i><br />' +
'<img src="http://www.kinzart.com/images/fur-affinity-icon.png" Alt="Twitter" width="30" height="30">' +
'<img src="http://biophiliccities.org/wp-content/uploads/2013/06/twitterICON.png" Alt="Twitter" width="30" height="30">';
users['window'+id] = new google.maps.InfoWindow({ content: users['content'+id]});
users['marker'+id] = new google.maps.Marker({ position: users['myLatlng'+id], map: map, title: users['USERNAME'+id], icon: users['IMAGEPIN'+id]});
google.maps.event.addListener(users['marker'+id], 'click', function() { infoWindow.setContent(users['content'+id]); infoWindow.open(map, users['marker'+id]) });
}
}
google.maps.event.addDomListener(window, 'load', initialize);
The problem is that when you setup your event listener within the loop, it ends up that every iteration of the loop sets the infowindow content to be whatever the last value of users['content'+id] is. You need to look into using closures in your code.
Here's another way of doing it that should work:
for (i=0;i<x.length;i++) {
... // trimmed for brevity
users['marker'+id] = new google.maps.Marker({ position: users['myLatlng'+id], map: map, title: users['USERNAME'+id], icon: users['IMAGEPIN'+id]});
bindInfoWindow(users['marker'+id], users['content'+id]);
}
then have this function:
function bindInfoWindow(marker, content) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(content);
infoWindow.open(map, marker)
});
}