Menu
I am trying to add multiple markers each with its own infowindow that comes up when clicked on. I am having trouble with getting the infowindows coming up, when I try it either shows up only one marker without an infowindow.
Thanks, let me know if you need some more information
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false"> </script> <script type="text/javascript"> var locations = [ ['loan 1', 33.890542, 151.274856, 'address 1'], ['loan 2', 33.923036, 151.259052, 'address 2'], ['loan 3', 34.028249, 151.157507, 'address 3'], ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'], ['loan 5', 33.950198, 151.259302, 'address 5'] ]; function initialize() { var myOptions = { center: new google.maps.LatLng(33.890542, 151.274856), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("default"), myOptions); setMarkers(map, locations) } function setMarkers(map, locations) { var marker, i for (i = 0; i < locations.length; i++) { var loan = locations[i][0] var lat = locations[i][1] var long = locations[i][2] var add = locations[i][3] latlngset = new google.maps.LatLng(lat, long); var marker = new google.maps.Marker({ map: map, title: loan, position: latlngset }); map.setCenter(marker.getPosition()) var content = "Loan Number: " + loan + '</h3>' + "Address: " + add var infowindow = new google.maps.InfoWindow() google.maps.AddListener(marker, 'click', function (map, marker) { infowindow.setContent(content) infowindow.open(map, marker) }); } } </script> </head> <body onload="initialize()"> <div id="default" style="width:100%; height:100%"></div> </body> </html> 
940
This was how I approached the problem, with the relevant sample code. //create a marker object first, or instantiate it by passing a JSON to the constructor. //this can be done inside a for loop var infowindow = new google. maps. InfoWindow({ //add relevant data here }); //creates an infowindow 'key' in the marker.
2048 characters in URL is just under 100 GeoCode values. So, again no more than 100 markers.
Call setPosition() on the info window, or. Attach the info window to a new marker using the InfoWindow. open() method. Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
You could use a closure. Just modify your code like this:
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 DEMO
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
