I have multiple markers on the map that I have imported from JSON. Inside the marker infowindow I have a button and when clicking on that, I want to change the marker image. Please check my code below. Marker list and Infowindow is working fine. I just want to do some actions on the button that is inside infowindow.
var workerlist;
var jobprice;
var price;
var map;
var list;
var position;
var image;
var image1;
var marker;
function myMap() {
var mapProp= {
center:new google.maps.LatLng(30.7333,76.7794),
zoom:10,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"),mapProp);
image = 'images/blue_marker1.png';
image1 = 'images/pink_marker1.png';
console.log(workerlist);
for (var i = 0; i < workerlist.length; i++) {
list = workerlist[i];
price = jobprice;
position = new google.maps.LatLng(list.latitude,list.longitude);
addMarker(map,list,price,position,marker);
}
}
function addMarker(map,list,price,position,marker){
marker = new google.maps.Marker({
position: position,
title: list.name,
map: map,
icon: image
});
var contentString = '<div class="mapBox">'+
'<div class="content"> <h3>'+ list.name +
'</h3>'+
'<h6>(2.1 miles from the job venue)</h6>' +
'<div class="rating"></div>'+
'<p>Total cost to hire:</p>'+
'<p>Rate: $' + price.Price + ' per hour</p>'+
'<p>Total Cost: $'+ price.total_amount +'</p>'+
'</div><button id="shortList" class="btn btn-shortlist" onclick="shortList()">Shortlist for the JOb</button>'+
'</div>';
marker.addListener('click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
})
infowindow.open(map,marker)
$("#shortList").click(function(){
image = 'images/pink_marker1.png';
});
});
}
function shortList(){
// alert('clicked');
// infowindow.close();
//marker.setIcon(image1);
}
Before you can access the <button id="shortList"> in the DOM with JQuery, it needs to be added to the DOM. That happens asynchronously when the InfoWindow content is rendered, the domready event on the InfoWindow fires when it is available.
google.maps.event.addListener(infowindow, 'domready', function() {
$("#shortList").click(function() {
// code here to change the icon
});
});
related question: How to detect button click in googlemaps infowindow
If you want the icon of the marker to change, you need to call .setIcon on the marker:
marker.addListener('click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
})
infowindow.open(map, marker)
var that = this; // save reference to marker to change its icon
google.maps.event.addListener(infowindow, 'domready', function() {
$("#shortList").click(function() {
image = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
that.setIcon(image);
});
});
});
proof of concept fiddle
code snippet:
var workerlist;
var jobprice = {
Price: "$10",
total_amount: "$100"
};
var price;
var map;
var list;
var position;
var image;
var image1;
var marker;
workerlist = [{
name: "Chandigarth",
latitude: 30.7333,
longitude: 76.7794
},
{
name: "Chandigarth2",
latitude: 30.7,
longitude: 76.7
}
]
function myMap() {
var mapProp = {
center: new google.maps.LatLng(30.7333, 76.7794),
zoom: 10,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
image1 = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
console.log(workerlist);
for (var i = 0; i < workerlist.length; i++) {
list = workerlist[i];
price = jobprice;
position = new google.maps.LatLng(list.latitude, list.longitude);
addMarker(map, list, price, position, marker);
}
}
function addMarker(map, list, price, position, marker) {
marker = new google.maps.Marker({
position: position,
title: list.name,
map: map,
icon: image
});
var contentString = '<div class="mapBox">' +
'<div class="content"> <h3>' + list.name +
'</h3>' +
'<h6>(2.1 miles from the job venue)</h6>' +
'<div class="rating"></div>' +
'<p>Total cost to hire:</p>' +
'<p>Rate: $' + price.Price + ' per hour</p>' +
'<p>Total Cost: $' + price.total_amount + '</p>' +
'</div><button id="shortList" class="btn btn-shortlist" onclick="shortList()">Shortlist for the JOb</button>' +
'</div>';
marker.addListener('click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
})
infowindow.open(map, marker)
var that = this;
google.maps.event.addListener(infowindow, 'domready', function() {
$("#shortList").click(function() {
image = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
that.setIcon(image);
});
});
});
}
function shortList() {
// alert('clicked');
// infowindow.close();
//marker.setIcon(image1);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Info Windows</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=myMap&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I'm working on a view of the ASP.NET, using mvc. I using google maps with different markers. Each of those markers have their own infowindows that have 3 buttons each. By clicking a specific button I want the marker to change color. How can I do that?
I have already tried using document.getElementById and using the addEventListner. I also tried to program the button by using the onclick function.
var locations = [
["Recusado", "13/02/2019", 38.776816, -9.441833, 335, "foto.jpg", ],
["Aceite", "15/08/2019",38.817562, -8.941728, 36, "foto.jpg"],
["Em avaliação", "20/07/2019",38.487978, -9.004425, 90,"foto.jpg"],
["Concluído", "01/07/2019",37.045804, -8.898041, 12, "foto.jpg"]
];
var infowindow = new google.maps.InfoWindow({});
function setMarkers(map) {
for (var i = 0; i < locations.length; i++) {
var fire = locations[i];
var marker ;
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<div id="bodyContent">' +
'<p><b>Avaliação da Ocorrência:</b></p>' +
'<p>Fotografias:' + fire[5] + '</p>' +
'<p>Avaliação:' + fire[0] + '</p>' +
'<p>Data:' + fire[1] + '</p></br>' +
'<button id="aceite">Aceite</button>' +
'<button>Recusado</button>' +
'<button> Em avaliação</button>' +
'<button> Concluído</button>' +
'</div>';
var infoWindow = new google.maps.InfoWindow({ content: contentString });
marker = new google.maps.Marker({
position: { lat: fire[2], lng: fire[3] },
map: map,
info: contentString,
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(this.info);
infoWindow.open(map, this);
});
}
}
The buttons are represented in the variable contentString, and when I click the button with the id "Aceite", I want to change the color of the marker to green.
Attempt to change the marker to green:
<button id="aceite" onclick="state(marker)">Aceite</button>
function state(marker){
marker.setIcon('google.com/mapfiles/marker_green.png');
}
Simplest would be to add the click listener function when you open the InfoWindow (when you know what marker it is associated with).
Add the click listener to the button when the domready event of the InfoWindow fires (and it has been added to the DOM):
google.maps.event.addListener(infoWindow, 'domready', function() {
google.maps.event.addDomListener(document.getElementById("aceite"), 'click', function(e) {
marker.setIcon('http://maps.google.com/mapfiles/marker_green.png');
})
});
Use function closure on the marker in the marker click listener (this references the marker in the click event listener function, but not in the InfoWindow domready event listener, save it so you can use it there):
google.maps.event.addListener(marker, 'click', function() {
var marker = this;
infoWindow.setContent(this.info);
google.maps.event.addListener(infoWindow, 'domready', function() {
google.maps.event.addDomListener(document.getElementById("aceite"), 'click', function(e) {
marker.setIcon('http://maps.google.com/mapfiles/marker_green.png');
})
});
infoWindow.open(map, this);
});
proof of concept fiddle
code snippet:
function initMap() {
var myLatLng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var infowindow = new google.maps.InfoWindow({});
setMarkers(map);
}
var locations = [
["Recusado", "13/02/2019", 38.776816, -9.441833, 335, "foto.jpg", ],
["Aceite", "15/08/2019", 38.817562, -8.941728, 36, "foto.jpg"],
["Em avaliação", "20/07/2019", 38.487978, -9.004425, 90, "foto.jpg"],
["Concluído", "01/07/2019", 37.045804, -8.898041, 12, "foto.jpg"]
];
function setMarkers(map) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var fire = locations[i];
var marker;
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<div id="bodyContent">' +
'<p><b>Avaliação da Ocorrência:</b></p>' +
'<p>Fotografias:' + fire[5] + '</p>' +
'<p>Avaliação:' + fire[0] + '</p>' +
'<p>Data:' + fire[1] + '</p></br>' +
'<button id="aceite">Aceite</button>' +
'<button>Recusado</button>' +
'<button> Em avaliação</button>' +
'<button> Concluído</button>' +
'</div>';
var infoWindow = new google.maps.InfoWindow({
content: contentString
});
marker = new google.maps.Marker({
position: {
lat: fire[2],
lng: fire[3]
},
map: map,
info: contentString,
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', function() {
var marker = this;
infoWindow.setContent(this.info);
google.maps.event.addListener(infoWindow, 'domready', function() {
google.maps.event.addDomListener(document.getElementById("aceite"), 'click', function(e) {
marker.setIcon('http://maps.google.com/mapfiles/marker_green.png');
})
});
infoWindow.open(map, this);
});
}
map.fitBounds(bounds);
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
I've created some code to create a google map and it pulls in some marker data. How would I structure this code to only have a single Infowindow open at once? The more direct answer the better.
function initializeLocations(locations) {
$.each(locations, function (i, location) {
var marker = new google.maps.Marker({
position: location.geo,
map: map,
title: location.name
});
var contentName = '<br><b>' + location.name + '</b><br>';
var contentLink = 'More Info';
var contentAddress = location.address;
var content = contentName + contentAddress + contentLink
var infoWindow = new google.maps.InfoWindow({
content: content
});
marker.addListener('click', function() {
infoWindow.open(map, this);
});
});
}
I found the solution. Heres what i did.
function initializeLocations(locations) {
var infoWindow = new google.maps.InfoWindow({});
$.each(locations, function (i, location) {
var marker = new google.maps.Marker({
position: location.geo,
map: map,
title: location.name
});
var contentName = '<br><b>' + location.name + '</b><br>';
var contentLink = 'More Info';
var contentAddress = location.address;
var content = contentName + contentAddress + contentLink
google.maps.event.addListener(marker, 'click', (function(marker) {
return function(){
infoWindow.setContent(content);
infoWindow.open(map, marker);
}
})(marker));
});
}
I'm using the Google Maps API to capture the zoom level when the user clicks on the map. I would then like to increase the zoom level by 1, but I'm having trouble doing this and I'm getting multiple console.log entries when I run this in the browser.
Here's the script in question:
var map = null;
function initialize() {
var myOptions = {
zoom: 12,
scaleControl: true,
streetViewControl: false,
center: new google.maps.LatLng(-28.8413400, 153.4384050),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-28.8413400, 153.4384050),
map: map,
icon: 'https://maps.google.com/mapfiles/ms/icons/blue.png',
title: ''
});
var point = new google.maps.LatLng(-27.7028557, 153.0120736);
var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
var marker = createMarker(point, '<p style="font-size:14px">Acme Services 2</p>', icon)
var point = new google.maps.LatLng(-29.8089498, 152.8230076);
var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
var marker = createMarker(point, '<p style="font-size:14px">Acme Services 4</p>', icon)
var point = new google.maps.LatLng(-26.6564235, 153.0586826);
var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
var marker = createMarker(point, '<p style="font-size:14px">Acme Services 4</p>', icon)
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(100, 20)
});
function createMarker(latlng, html, icon) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: icon,
map: map,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoomLevel = map.getZoom();
console.log(zoomLevel);
});
google.maps.event.addListener(map, "click", function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
var newCentre = latitude + ', ' + longitude;
var currentZoomLevel = map.getZoom();
console.log("currentZoomLevel: " + currentZoomLevel);
var zoomLevel = parseInt(currentZoomLevel, 10) + 1;
console.log("zoomLevel: " + zoomLevel);
});
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Markers</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.33&key=myKeyHere"></script>
<style type="text/css">
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map-canvas"></div>
</body>
</html>
When I look at the console log I can see multiple entries of the following:
[Log] currentZoomLevel: 12
[Log] zoomLevel: 13
It looks like it's generating an entry for each marker that I have on the map. For example if I have 3 markers I'm getting 6 entries in the console.log, but I'm not sure why this is happening?
Simply move your map event listeners outside of your createMarker function.
I also modified:
declared infowindow as a global variable so that it can be accessed in both functions
merged the 2 map click event listeners into one
var map = null;
var infowindow;
function initialize() {
var myOptions = {
zoom: 12,
scaleControl: true,
streetViewControl: false,
center: new google.maps.LatLng(-28.8413400, 153.4384050),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
myOptions);
infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(100, 20)
});
google.maps.event.addListener(map, 'click', function(event) {
infowindow.close();
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
var newCentre = latitude + ', ' + longitude;
var currentZoomLevel = map.getZoom();
console.log("currentZoomLevel: " + currentZoomLevel);
var zoomLevel = parseInt(currentZoomLevel, 10) + 1;
console.log("zoomLevel: " + zoomLevel);
});
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoomLevel = map.getZoom();
console.log(zoomLevel);
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-28.8413400, 153.4384050),
map: map,
icon: 'https://maps.google.com/mapfiles/ms/icons/blue.png',
title: ''
});
var point = new google.maps.LatLng(-27.7028557, 153.0120736);
var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
var marker = createMarker(point, '<p style="font-size:14px">Acme Services 2</p>', icon)
var point = new google.maps.LatLng(-29.8089498, 152.8230076);
var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
var marker = createMarker(point, '<p style="font-size:14px">Acme Services 4</p>', icon)
var point = new google.maps.LatLng(-26.6564235, 153.0586826);
var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
var marker = createMarker(point, '<p style="font-size:14px">Acme Services 4</p>', icon)
}
function createMarker(latlng, html, icon) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: icon,
map: map,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
}
initialize();
#map-canvas {
height: 200px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
I'de like to have all Markers set when initializing
the page and when the mouse is out of the div. When the mouse is on one of the div, the Marker related to this div remains and the other ones are removed until mouseleave.
So I tried to remove all markers with setMapOnAll(null) and add the one specific to the div on mouseover, and then reset all markers on mouseleave.
But I cant make the Markers disappear.
Javascript:
<script>
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var name = "name1";
var address = "address 1";
var condition = "true";
var point = new google.maps.LatLng(42, -72);
var html = "<b>" + name + "</b> <br/>" + address;
var i = 0;
createMarker(point, condition,html, i, map);
point = new google.maps.LatLng(42.02, -72.02);
name = "name2";
address = "address 2";
html = "<b>" + name + "</b> <br/>" + address;
condition = "false";
i++;
var marker = createMarker(point, condition, html, i, map);
map.setCenter(marker.getPosition());
}
function createMarker(point, condition, html, i, map) {
var marker = new google.maps.Marker({
map: map,
position: point,
draggable: true
});
var activeIcon, idleIcon;
if (condition == "true") {
idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
} else {
idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
}
marker.setIcon(idleIcon);
var elem = document.getElementById('a' + i);
if (!!elem) {
elem.onmouseover = function() {
setMapOnAll(marker, null);
marker.setIcon(idleIcon);
}
elem.onmouseleave = function() {
setMapOnAll(marker, map);
}
}
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
return marker;
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
function setMapOnAll(marker, map) {
for (var i = 0; i < marker.length; i++) {
marker[i].setMap(map);
}
}
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
html:
<div id="a0">marker 1</div>
<div id="a1">marker 2</div>
<div id="map"></div>
CSS:
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
Just change the example in that question to set the map property of the marker on mouseover of the external div, and set it back to null on mouseleave.
code snippet:
function createMarker(point, icon, html, i, map) {
var marker = new google.maps.Marker({
position: point,
draggable: true
});
marker.setIcon(icon);
var elem = document.getElementById('a' + i);
if (!!elem) {
elem.onmouseover = function() {
marker.setMap(map);
}
elem.onmouseleave = function() {
marker.setMap(null);
}
document.getElementById('a' + i).onclick = (function(marker) {
return function() {
google.maps.event.trigger(marker, 'click');
}
})(marker);
}
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
return marker;
}
var infoWindow = new google.maps.InfoWindow();
var markers = [];
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var name = "name1";
var address = "address 1";
var point = new google.maps.LatLng(42, -72);
var html = "<b>" + name + "</b> <br/>" + address;
var i = 0;
createMarker(point, 'http://labs.google.com/ridefinder/images/mm_20_blue.png', html, i, map);
point = new google.maps.LatLng(42.02, -72.02);
name = "name2";
address = "address 2";
html = "<b>" + name + "</b> <br/>" + address;
i++;
var marker = createMarker(point, 'http://labs.google.com/ridefinder/images/mm_20_green.png', html, i, map);
point = new google.maps.LatLng(42.01, -72.01);
name = "name3";
address = "address 3";
html = "<b>" + name + "</b> <br/>" + address;
i++;
var marker = createMarker(point, 'http://labs.google.com/ridefinder/images/mm_20_red.png', html, i, map);
map.setCenter(marker.getPosition());
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="a0">marker 1</div>
<div id="a1">marker 2</div>
<div id="a2">marker 3</div>
<div id="map_canvas"></div>
Hello I'm retrieving data from SqlServerCe so I created foreach loop to create markers - that works it creates multiple markers but now I wanted to add to each of these marker an infowindow. But now whenever I click on marker the infowindow pops-up on the lastly created marker.
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
, mapProp);
$(function () {
#foreach (var row in data)
{
<text>
var marker = new google.maps.Marker({ position: new google.maps.LatLng(#row.GeoLat, #row.GeoLong),
map: map });
marker.info = new google.maps.InfoWindow({
content: "test"
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
</text>
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
May someone help me with adding infowindow to each created markers?
Thank you for your responding and your time.
This is how I load from SqlServerCe
var db = Database.Open("StarterSite");
var data = db.Query("SELECT DescriptionService,GeoLong,GeoLat FROM services");
var array = new []{data} ;
You can use the following, written in javascript
var infoWindowContent = [];
for(var index=0; index< places.length; index++){
infoWindowContent[index] = getInfoWindowDetails(places[index]);
var location = new google.maps.LatLng(places[index].latitude,places[index].longitude);
bounds.extend(location);
marker = new google.maps.Marker({
position : location,
map : map,
title : places[index].title
});
google.maps.event.addListener(marker, 'click', (function(marker,index){
return function(){
infoWindow.setContent(infoWindowContent[index]);
infoWindow.open(map, marker);
map.setCenter(marker.getPosition());
map.setZoom(15);
}
})(marker,index));
}
function getInfoWindowDetails(location){
var contentString = '<div id="content" style="width:270px;height:100px">' +
'<h3 id="firstHeading" class="firstHeading">' + location.title + '</h3>'+
'<div id="bodyContent">'+
'<div style="float:left;width:100%">'+ location.address + '</div>'+
'</div>'+
'</div>';
return contentString;
}
I added an array infoWindowContent then added the information to the array. You can use the same logic