Google지도 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); 
}