javascript - Google Maps API 3 - Info Window Issue -
this question has answer here:
what need add & - make markers popup info window, using var locations txt?
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var map; var brooklyn = new google.maps.latlng(48.1391265, 11.580186300000037); var my_maptype_id = 'custom_style'; function initialize() { var mapoptions = { zoom: 2, center: new google.maps.latlng(48.1391265, 11.580186300000037), disabledefaultui: true, maptypecontrol: true, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu }, zoomcontrol: true, pancontrol: true, maptypeid: google.maps.maptypeid.roadmap, styles: [ { stylers: [ { hue: "#098aad" } ] } ] } var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); setmarkers(map, locations); } var locations = [ ['plano tx', 33.01984, -96.69889, 13], ['hemel hempstead uk', 51.75324, -0.44863, 12], ['dubai', 25.27114, 55.30748, 11], ['san francisco ca', 37.77493, -122.41942, 10], ['chicago il', 41.87811, -87.62980, 9], ['new york ny', 40.71435, -74.00597, 8], ['troy mi', 42.60559, -83.14993, 7], ['santa monica ca', 34.01945, -118.49119, 6], ['st peters mo', 38.78747, -90.62989, 5], ['pittsford ny', 43.09062, -77.51500, 4], ['las vegas nv', 36.11465, -115.17282, 3], ['haidian beijing', 39.95991, 116.29805, 2], ['new delhi', 28.63531, 77.22496, 1] ]; function setmarkers(map, locations) { var image = { url: 'images/marker-rmg.png', size: new google.maps.size(32, 32), origin: new google.maps.point(0,0), anchor: new google.maps.point(16, 32) }; var shape = { coord: [1, 1, 1, 20, 18, 20, 18 , 1], type: 'poly' }; (var = 0; < locations.length; i++) { var location = locations[i]; var mylatlng = new google.maps.latlng(location[1], location[2]); var marker = new google.maps.marker({ position: mylatlng, map: map, icon: image, shape: shape, title: location[0], zindex: location[3] }); } } google.maps.event.adddomlistener(window, 'load', initialize); </script> <div id="map-canvas" style="height: 300px;"></div>
create global variable (or within setmarkers function), infowindow:
var infowindow = new google.maps.infowindow({ content: "" }); then within loop, call new function, passing various parameters you'll require:
for (var = 0; < locations.length; i++) { var location = locations[i]; var mylatlng = new google.maps.latlng(location[1], location[2]); var marker = new google.maps.marker({ position: mylatlng, map: map, icon: image, shape: shape, title: location[0], zindex: location[3] }); bindinfowindow(marker, map, infowindow, location[0]); } then create new global function binds click event markers , opens infowindow specified content:
function bindinfowindow(marker, map, infowindow, strdescription) { google.maps.event.addlistener(marker, 'click', function() { infowindow.setcontent(strdescription); infowindow.open(map, marker); }); } update: here's complete code i'd use
<script> var map; var brooklyn = new google.maps.latlng(48.1391265, 11.580186300000037); var my_maptype_id = 'custom_style'; var locations = [ ['plano tx', 33.01984, -96.69889, 13], ['hemel hempstead uk', 51.75324, -0.44863, 12], ['dubai', 25.27114, 55.30748, 11], ['san francisco ca', 37.77493, -122.41942, 10], ['chicago il', 41.87811, -87.62980, 9], ['new york ny', 40.71435, -74.00597, 8], ['troy mi', 42.60559, -83.14993, 7], ['santa monica ca', 34.01945, -118.49119, 6], ['st peters mo', 38.78747, -90.62989, 5], ['pittsford ny', 43.09062, -77.51500, 4], ['las vegas nv', 36.11465, -115.17282, 3], ['haidian beijing', 39.95991, 116.29805, 2], ['new delhi', 28.63531, 77.22496, 1] ]; function bindinfowindow(marker, map, infowindow, strdescription) { google.maps.event.addlistener(marker, 'click', function() { infowindow.setcontent(strdescription); infowindow.open(map, marker); }); } function setmarkers(map, locations) { var infowindow = new google.maps.infowindow({ content: "" }); var image = { url: 'images/marker-rmg.png', size: new google.maps.size(32, 32), origin: new google.maps.point(0,0), anchor: new google.maps.point(16, 32) }; var shape = { coord: [1, 1, 1, 20, 18, 20, 18 , 1], type: 'poly' }; var i, location, mylatlng, marker; (i = 0; < locations.length; i++) { location = locations[i]; mylatlng = new google.maps.latlng(location[1], location[2]); marker = new google.maps.marker({ position: mylatlng, map: map, icon: image, shape: shape, title: location[0], zindex: location[3] }); bindinfowindow(marker, map, infowindow, location[0]); } } function initialize() { var mapoptions = { zoom: 2, center: new google.maps.latlng(48.1391265, 11.580186300000037), disabledefaultui: true, maptypecontrol: true, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu }, zoomcontrol: true, pancontrol: true, maptypeid: google.maps.maptypeid.roadmap, styles: [ { stylers: [ { hue: "#098aad" } ] } ] }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); setmarkers(map, locations); } google.maps.event.adddomlistener(window, 'load', initialize); </script>
Comments
Post a Comment