Google Maps API - 마커 도구 설명

Question

Google지도 마커 제목이 표시되지 않아 조금만 문제가 있습니다. 이것은 나의 첫번째지도 다, 나는 내가 무엇을 잘못하고 있는지에 관해 너무나 확신하지 않는다.

마커를 클릭하거나 가리키면 툴팁이나 제목이 표시되지 않는 경우를 제외하고 모든 것이 잘 작동하고 마커가 나타납니다.

도움이 될 것입니다.

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script> 
    function initialize() { 

    // set mapOptions 
    var mapOptions = { 
     center: new google.maps.LatLng(40, -20), 
     zoom: 3, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}] 
    }; 

    // set min and max zoom 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 
    var opt = { minZoom: 3, maxZoom: 21 }; 
    map.setOptions(opt); 

    // bounds of the desired area 
    var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(-79.00, -180.00), 
     new google.maps.LatLng(79.00, 180.00) 
    ); 
    var boundLimits = { 
     maxLat : allowedBounds.getNorthEast().lat(), 
     maxLng : allowedBounds.getNorthEast().lng(), 
     minLat : allowedBounds.getSouthWest().lat(), 
     minLng : allowedBounds.getSouthWest().lng() 
    }; 

    var lastValidCenter = map.getCenter(); 
    var newLat, newLng; 
    google.maps.event.addListener(map, 'center_changed', function() { 
     center = map.getCenter(); 
     if (allowedBounds.contains(center)) { 
     // still within valid bounds, so save the last valid position 
     lastValidCenter = map.getCenter(); 
     return; 
     } 
     newLat = lastValidCenter.lat(); 
     newLng = lastValidCenter.lng(); 
     if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){ 
     newLng = center.lng(); 
     } 
     if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){ 
     newLat = center.lat(); 
     } 
     map.panTo(new google.maps.LatLng(newLat, newLng)); 
    }); 

    // set markers 
    var point = new google.maps.LatLng(40, -20); 
    var marker = new google.maps.Marker({ 
     position: point, 
     title:"Hello World!" 
    }); 

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


    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Answer 1

Woops를 게시하기 전에 조금 더 조사를 해보았어야했지만 내 솔루션을 게시 할 수도 있습니다. 대신 제목의

, 나는 Google지도 InfoWindow를 사용했습니다 :

는 희망이 다른 사람을 도움이됩니다!

var point = new google.maps.LatLng(40, -20); 
    var data = "Hello World!"; 
    var infowindow = new google.maps.InfoWindow({ 
     content: data 
    }); 
    var marker = new google.maps.Marker({ 
     position: point, 
     title:"Hello World!" 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
    });