Google지도 API 메시지 상자

Question

내 코드가 작동하지 않는 이유가 궁금합니다. 클릭하면 메시지 상자를 표시하도록 Google지도 API를 가져 오려고합니다. 위도와 경도 및 메시지 상자 텍스트를 기밀로 변경했습니다. 어떤 도움이라도 대단히 감사 할 것입니다! 감사!

   <script> 
       var mapCanvas = document.getElementById("map"); 
       var mapOptions = { 
       center: new google.maps.LatLng(54.2, -3.0), zoom: 6 
       }; 
       var map = new google.maps.Map(mapCanvas, mapOptions); 

       var center; 
       function calculateCenter() { 
        center = map.getCenter(); 
       } 
        google.maps.event.addDomListener(map, 'idle', function() { 
        calculateCenter(); 
       }); 
        google.maps.event.addDomListener(window, 'resize', function() { 
        map.setCenter(center); 
       }); 


       var myLatlng = new google.maps.LatLng(1234567,-1233254); 
       var mapOptions = { 
       zoom: 4, 
       center: myLatlng 
       }; 
       //     var map = new        google.maps.Map(document.getElementById("map"), mapOptions); 
       // 
       var marker = new google.maps.Marker({ 
       position: myLatlng, 
       title:"Hello World!" 
       }); 

       // To add the marker to the map, call setMap(); 
       marker.setMap(map); 


       //on click do the following 
       marker.addListener('click', function() { 

       //center the map to the marker 
       map.setCenter(marker.getPosition()); 


       //make marker bounce on map 
       marker.setAnimation(google.maps.Animation.BOUNCE); 
       //setTimeout(function(){ marker.setAnimation(null); }, 750); 



       var contentString = '<div id="content">'+ 
         '<div id="Site">'+ 
         '</div>'+ 
         '<h1 id="firstHeading" class="firstHeading">11111</h1>'+ 
         '<div id="BodyContent">'+ 
         '<p>aaaaaaaaaa</p>'+ 
         '</div>'; 

       var infowindow = new google.maps.InfoWindow({ 
        content: contentString 
        });      

       }); 

       </script> 

Answer 1

당신은 정보창을 "열기"를하지 않습니다. 클릭 수신기에 infowindow.open(map, marker);을 추가해야합니다.

var mapCanvas = document.getElementById("map"); 
 
var mapOptions = { 
 
    center: new google.maps.LatLng(54.2, -3.0), 
 
    zoom: 6 
 
}; 
 
var map = new google.maps.Map(mapCanvas, mapOptions); 
 

 
var center; 
 

 
function calculateCenter() { 
 
    center = map.getCenter(); 
 
} 
 
google.maps.event.addDomListener(map, 'idle', function() { 
 
    calculateCenter(); 
 
}); 
 
google.maps.event.addDomListener(window, 'resize', function() { 
 
    map.setCenter(center); 
 
}); 
 

 

 
var myLatlng = new google.maps.LatLng(54.2, -3.0); 
 
var mapOptions = { 
 
    zoom: 4, 
 
    center: myLatlng 
 
}; 
 
//     var map = new        google.maps.Map(document.getElementById("map"), mapOptions); 
 
// 
 
var marker = new google.maps.Marker({ 
 
    position: myLatlng, 
 
    title: "Hello World!" 
 
}); 
 

 
// To add the marker to the map, call setMap(); 
 
marker.setMap(map); 
 

 

 
//on click do the following 
 
marker.addListener('click', function() { 
 

 
    //center the map to the marker 
 
    map.setCenter(marker.getPosition()); 
 

 

 
    //make marker bounce on map 
 
    marker.setAnimation(google.maps.Animation.BOUNCE); 
 
    //setTimeout(function(){ marker.setAnimation(null); }, 750); 
 

 

 

 
    var contentString = '<div id="content">' + 
 
    '<div id="Site">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">11111</h1>' + 
 
    '<div id="BodyContent">' + 
 
    '<p>aaaaaaaaaa</p>' + 
 
    '</div>'; 
 

 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: contentString, 
 
    }); 
 
    infowindow.open(map, marker); 
 

 
});

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>