8

我現在有一點點的問題,我的谷歌地圖標記標題沒有顯示。這是我的第一張地圖,我不太確定我做錯了什麼。谷歌地圖API - 標記工具提示

一切工作正常,並且標記顯示出來,除非當您單擊/懸停在標記上時,工具提示或標題不顯示時,它應該。

任何幫助是偉大的!

<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> 
+0

我在某些時候有同樣的問題。隨機地,標記有/沒有標題。我無法解決它。但是我使用自定義覆蓋作爲標記標題。 – machineaddict

回答

24

Woops,我可能應該在發佈之前做一些更多的研究,但我想我可能會發布我自己的解決方案。

而不是一個稱號,我用谷歌地圖信息窗口:

希望這會幫助別人!

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); 
    }); 
+8

你應該可能研究過一些短語,這不是一個工具提示,它是一個彈出式菜單,工具提示是當你結束某些事情時,它不會在你點擊它時顯示出來。 –

+0

偉大的發現鑰匙。真的很感謝你的發佈。謝謝。 – CreativeCreate

+0

您甚至可以添加整個html而不是簡單的文本字符串,並設置彈出窗口的maxWidth - 查看此鏈接:https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple-max –