Google map with multiple markers and numbers and infowindow - google-maps

Question

I want to display a map with multiple markers and it should display numbers in the marker and also an infowindow with info from the array.
It shows all the markers but with the number 5 in all of them and it is displaying the "Maroubra Beach" in the info window on all.
The info window itself, works as it should, that is that it opens on every marker as it should, but is displaying the wrong text!
Im not sure what Im doing wrong with the counter!? Since it is displaying 5 in all markers.
var geocoder;
var map;
function initializemulti() {
//this is the geolocationmarker-compiled.js file
(function() {var c=null,e;
function f(b,a,d){var i={clickable:!1,cursor:"pointer",draggable:!1,flat:!0,icon:new google.maps.MarkerImage("https://google-maps-utility-library-v3.googlecode.com/svn/trunk/GeolocationMarker/images/gpsloc.png",new google.maps.Size(15,15),new google.maps.Point(0,0),new google.maps.Point(7,7)),optimized:!1,position:new google.maps.LatLng(0,0),title:"Current location",zIndex:2};a&&(i=g(i,a));a={clickable:!1,radius:0,strokeColor:"1bb6ff",strokeOpacity:0.4,fillColor:"61a0bf",fillOpacity:0.4,strokeWeight:1,
zIndex:1};d&&(a=g(a,d));this.a=new google.maps.Marker(i);this.b=new google.maps.Circle(a);this.b.bindTo("center",this.a,"position");this.b.bindTo("map",this.a);b&&this.e(b)}e=f.prototype;e.c=c;e.a=c;e.b=c;e.g=function(){return this.c};e.h=function(){return this.c?this.a.getPosition():c};e.f=function(){return this.c?this.b.getBounds():c};e.i=function(){return this.c?this.b.getRadius():c};e.d=-1;
e.e=function(b){if(this.c=b){var a=this,b={enableHighAccuracy:!0,maximumAge:1E3};navigator.geolocation&&(this.d=navigator.geolocation.watchPosition(function(d){var b=new google.maps.LatLng(d.coords.latitude,d.coords.longitude);a.b.setRadius(d.coords.accuracy);if(!a.a.getMap()||!b.equals(a.a.getPosition()))a.a.setPosition(new google.maps.LatLng(d.coords.latitude,d.coords.longitude)),a.a.setPosition(b),a.a.getMap()||a.a.setMap(a.c),google.maps.event.trigger(a,"position_changed",new h(b,a.b.getBounds(),
d.coords.accuracy))},function(b){google.maps.event.trigger(a,"geolocation_error",b)},b))}else navigator.geolocation.clearWatch(this.d),this.d=-1,this.a.setMap(b)};e.k=function(b){this.a.setOptions(g({},b))};e.j=function(b){this.b.setOptions(g({},b))};function g(b,a){for(var d in a)j[d]||(b[d]=a[d]);return b}var j={map:!0,position:!0,radius:!0};function h(b,a,d){b&&(this.position=b);a&&(this.bounds=a);d&&(this.accuracy=d)}h.prototype.position=c;h.prototype.bounds=c;h.prototype.accuracy=c;f.prototype.getAccuracy=f.prototype.i;f.prototype.getBounds=f.prototype.f;f.prototype.getMap=f.prototype.g;f.prototype.getPosition=f.prototype.h;f.prototype.setCircleOptions=f.prototype.j;f.prototype.setMap=f.prototype.e;f.prototype.setMarkerOptions=f.prototype.k;window.GeolocationMarker=f;})()
//alert("init");
var locations = [
['Big Boys Grill & Bar', '<br />Kungsgatan 28, Varberg'],
['Black Pearl Varberg', '<br />Kungsgatan 13, Varberg'],
['Bruket', '<br />Birger Svenssons väg 16 E, Varberg'],
['Comwell Varbergs Kurort', '<br />Nils Kreugers väg 5, Varberg']
];
var mapen = new google.maps.Map(document.getElementById('map_canvasmulti'), {
zoom: 12,
center: new google.maps.LatLng(57.111488,12.246623),
//center: undefined,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var geocoder = new google.maps.Geocoder();
//for displaying the current users location
var GeoMarker = new GeolocationMarker();
GeoMarker.setCircleOptions({fillColor: '#808080'});
google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
// mapen.setCenter(this.getPosition());
// mapen.fitBounds(this.getBounds());
});
google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
alert('There was an error obtaining your position. Message: ' + e.message);
});
GeoMarker.setMap(mapen);
var marker,i;
var markers = [];
var marker, i;
for (i = 0; i < locations.length; i++) {
var p = locations[i];
geocoder.geocode({
'address': locations[i][1]
}, (function(i,p) {
return function(results, status) {
//alert(status);
if (status == google.maps.GeocoderStatus.OK) {
//alert(results[0].geometry.location);
mapen.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
position: results[0].geometry.location,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + ([i+1]) + '|FF776B|000000',
map: mapen,
title: p[2]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(p[0] + p[1]);
infowindow.open(mapen, this);
});
// google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(mapen, this);});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
} else {
alert("some problem in geocode" + status);
}
};
})(i,p));
}
}
Any input really appreciated, thanks!
Ok so this works, except for that the blue dots is not showing? The circle around the users location i showing, but not the blue dot?

Answer 1

Use anonymous function closure (doesn't have to be anonymous, named functions work as well) to keep the information associated with the geocode request (for use in the callback) and in the infowindow click event handler (for use when the marker is clicked).
var locations = [
['Bondi Beach', '850 Bay st 04 Toronto, Ont'],
['Coogee Beach', '932 Bay Street, Toronto, ON M5S 1B1'],
['Cronulla Beach', '61 Town Centre Court, Toronto, ON M1P'],
['Manly Beach', '832 Bay Street, Toronto, ON M5S 1B1'],
['Maroubra Beach', '606 New Toronto Street, Toronto, ON M8V 2E8']
];
var mapen = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(43.253205, -80.480347),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var geocoder = new google.maps.Geocoder();
var marker, i;
for (i = 0; i < locations.length; i++) {
var p = locations[i];
geocoder.geocode({
'address': locations[i][1]
}, (function(i,p) {
return function(results, status) {
//alert(status);
if (status == google.maps.GeocoderStatus.OK) {
//alert(results[0].geometry.location);
mapen.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
position: results[0].geometry.location,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + ([i]) + '|FF776B|000000',
map: mapen,
title: p[2]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(p[0]);
infowindow.open(mapen, this);
});
// google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(mapen, this);});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
} else {
alert("some problem in geocode" + status);
}
};
})(i,p));
}
html,
body,
#map_canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width: 100%; height: 100%;"></div>

Answer 2

Problem is you're loosing marker reference and only keeping the last one (note your array has 5 elements), to keep them, just create a markers[] array to store them:
var markers = [];
Then when marker is created add it to array
markers.push(marker);
Your code will be like this:
var locations = [
['Bondi Beach', '850 Bay st 04 Toronto, Ont'],
['Coogee Beach', '932 Bay Street, Toronto, ON M5S 1B1'],
['Cronulla Beach', '61 Town Centre Court, Toronto, ON M1P'],
['Manly Beach', '832 Bay Street, Toronto, ON M5S 1B1'],
['Maroubra Beach', '606 New Toronto Street, Toronto, ON M8V 2E8']
];
var mapen = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(43.253205,-80.480347),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var geocoder = new google.maps.Geocoder();
var marker,i;
var markers = [];
for (i = 0; i < locations.length; i++) {
var p = locations[i];
geocoder.geocode( { 'address': locations[i][1]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
mapen.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
position: results[0].geometry.location,
icon:'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ ([i]) +'|FF776B|000000',
map: mapen,
title: p[2]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(p[0]);
infowindow.open(mapen, this);
});
google.maps.event.addListener(marker, 'mouseout', function() { infowindow.close();});
// insert created marker in the array
markers.push(marker);
}
else
{
alert("some problem in geocode" + status);
}
});
}