使用Google Maps API添加標記功能

我有以下Javascript，其中包括標準Google Maps API initialize()函數和自定義addMarker()函數。地圖加載正常，但標記不會添加到地圖中。使用Google Maps API添加標記功能

<script type="text/javascript"> 

    // Standard google maps function 
    function initialize() { 
     var myLatlng = new google.maps.LatLng(40.779502, -73.967857); 
     var myOptions = { 
      zoom: 12, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    } 

    // Function for adding a marker to the page. 
    function addMarker(location) { 
     marker = new google.maps.Marker({ 
      position: location, 
      map: map 
     }); 
    } 

    // Testing the addMarker function 
    CentralPark = new google.maps.LatLng(37.7699298, -122.4469157); 
    addMarker(CentralPark); 

</script>

來源

2011-10-09 Quaye

查看本教程以獲取完整解決方案。 http://webdesignpluscode.blogspot.com.tr/2016/02/how-to-add-markerpin-on-google-map.html –

您已經添加了功能之外的附加標記方法調用，並導致它的初始化方法將被調用時，谷歌地圖的腳本量，因而未添加標記，因爲地圖沒有初始化之前執行做如下... 創建單獨的方法TestMarker並調用它從初始化。

<script type="text/javascript"> 

    // Standard google maps function 
    function initialize() { 
     var myLatlng = new google.maps.LatLng(40.779502, -73.967857); 
     var myOptions = { 
      zoom: 12, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     TestMarker(); 
    } 

    // Function for adding a marker to the page. 
    function addMarker(location) { 
     marker = new google.maps.Marker({ 
      position: location, 
      map: map 
     }); 
    } 

    // Testing the addMarker function 
    function TestMarker() { 
      CentralPark = new google.maps.LatLng(37.7699298, -122.4469157); 
      addMarker(CentralPark); 
    } 
</script>

來源

2011-10-09 04:00:48

function initialize() { 
    var location = new google.maps.LatLng(44.5403, -78.5463); 
    var mapCanvas = document.getElementById('map_canvas'); 
    var map_options = { 
     center: location, 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(map_canvas, map_options); 

    new google.maps.Marker({ 
     position: location, 
     map: map 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize);

來源

2013-09-29 01:19:15 Kris

這是其他方法
您還可以使用setCenter方法與添加新的標記

檢查下面的代碼

$('#my_map').gmap3({ 
     action: 'setCenter', 
     map:{ 
     options:{ 
      zoom: 10 
     } 
     }, 
     marker:{ 
     values: 
      [ 
      {latLng:[position.coords.latitude, position.coords.longitude], data:"Netherlands !"} 
      ] 
     } 
    });

來源

2015-02-05 08:09:46

下面的代碼工作對我來說：

<script src="http://maps.googleapis.com/maps/api/js"></script> 
<script> 
    var myCenter = new google.maps.LatLng(51.528308, -0.3817765); 

    function initialize() { 
      var mapProp = { 
      center:myCenter, 
      zoom:15, 
      mapTypeId:google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 

     var marker = new google.maps.Marker({ 
      position: myCenter, 
      icon: { 
       url: '/images/marker.png', 
       size: new google.maps.Size(70, 86), //marker image size 
       origin: new google.maps.Point(0, 0), // marker origin 
       anchor: new google.maps.Point(35, 86) // X-axis value (35, half of marker width) and 86 is Y-axis value (height of the marker). 
      } 
     }); 

     marker.setMap(map); 

     } 
     google.maps.event.addDomListener(window, 'load', initialize); 

</script> 
<body> 
<div id="googleMap" style="width:500px;height:380px;"></div> 
</body>

Reference link

來源

2016-04-19 11:18:27

<div id="map" style="width:100%;height:500px"></div> 

<script> 
function myMap() { 
    var myCenter = new google.maps.LatLng(51.508742,-0.120850); 
    var mapCanvas = document.getElementById("map"); 
    var mapOptions = {center: myCenter, zoom: 5}; 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
    var marker = new google.maps.Marker({position:myCenter}); 
    marker.setMap(map); 
} 
</script> 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>

來源

2017-08-15 10:42:46 Imran

使用Google Maps API添加標記功能

回答

相關問題