在Google Maps JavaScript API中添加信息窗口

Question

我想問一下如何將信息窗口添加到Google地圖中的標記。條件是，我必須在地圖上創建一個帶有多個標記的程序。但是我怎麼能給每個標記指定一個信息窗口？

這是我的代碼現在：

var markers = []; 
    var map; 
    var labels = 'ABCD'; 
    var labelIndex = 0; 

    function initialize() { 
     map = new google.maps.Map(
     document.getElementById("map"), { 
      center: new google.maps.LatLng(40.7127837, -74.0059413), 
      zoom: 11, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     // New York, NY, USA (40.7127837, -74.0059413) 
     // Newark, NJ, USA (40.735657, -74.1723667) 
     // Jersey City, NJ, USA (40.72815749999999, -74.07764170000002) 
     // Bayonne, NJ, USA (40.6687141, -74.11430910000001) 

     addMarker({ 
     lat: 40.7127837, 
     lng: -74.0059413 
     }, "red"); 
     addMarker({ 
     lat: 40.735657, 
     lng: -74.1723667 
     }, "green"); 
     addMarker({ 
     lat: 40.7281575, 
     lng: -74.0776417 
     }, "yellow"); 
     addMarker({ 
     lat: 40.6687141, 
     lng: -74.1143091 
     }, "orange"); 
    } 
    google.maps.event.addDomListener(window, "load", initialize); 


    function addMarker(location, color) { 
     var marker = new google.maps.Marker({ 
     position: location, 
     label: labels[labelIndex++ % labels.length], 
     icon: { 
      url: 'http://maps.google.com/mapfiles/ms/icons/' + color + '.png', 
      labelOrigin: new google.maps.Point(15, 10) 
     }, 
     map: map 
     }); 
     markers.push(marker); 
    }  

能有人給我如何解決我的問題的解決方案？

Answer 1

你可以做這樣的：

var markers = []; 
var map; 
var labels = 'ABCD'; 
var labelIndex = 0; 

function initialize() { 
    map = new google.maps.Map(
    document.getElementById("map"), { 
     center: new google.maps.LatLng(40.7127837, -74.0059413), 
     zoom: 11, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    // New York, NY, USA (40.7127837, -74.0059413) 
    // Newark, NJ, USA (40.735657, -74.1723667) 
    // Jersey City, NJ, USA (40.72815749999999, -74.07764170000002) 
    // Bayonne, NJ, USA (40.6687141, -74.11430910000001) 

    addMarker({ 
    lat: 40.7127837, 
    lng: -74.0059413 
    }, "red", "New York is awesome!"); 
    addMarker({ 
    lat: 40.735657, 
    lng: -74.1723667 
    }, "green", "Newark is also cool!"); 
    addMarker({ 
    lat: 40.7281575, 
    lng: -74.0776417 
    }, "yellow", "Do not forget Jersey City!"); 
    addMarker({ 
    lat: 40.6687141, 
    lng: -74.1143091 
    }, "orange", "And not to mention Bayonne, too!"); 
} 
google.maps.event.addDomListener(window, "load", initialize); 

function addMarker(location, color, content) { 
    var infowindow = new google.maps.InfoWindow({ 
    content: content 
    }); 

    var marker = new google.maps.Marker({ 
    position: location, 
    label: labels[labelIndex++ % labels.length], 
    icon: { 
     url: 'http://maps.google.com/mapfiles/ms/icons/' + color + '.png', 
     labelOrigin: new google.maps.Point(15, 10) 
    }, 
    map: map 
    }); 

    marker.addListener('click', function() { 
    infowindow.open(map, marker); 
    }); 

    markers.push(marker); 
}