Thêm chức năng Đánh dấu bằng API Google Maps

Tôi có Javascript sau bao gồm cả chức năng API chuẩn của Google Maps initialize() và chức năng tùy chỉnh addMarker(). Bản đồ sẽ tải tốt tuy nhiên điểm đánh dấu không được thêm vào bản đồ.Thêm chức năng Đánh dấu bằng API Google Maps

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

Nguồn

2011-10-09 Quaye

Kiểm tra hướng dẫn này để có giải pháp hoàn chỉnh. http://webdesignpluscode.blogspot.com.tr/2016/02/how-to-add-markerpin-on-google-map.html –

Bạn đã thêm lời gọi phương thức add marker ngoài chức năng và gây ra nó để thực thi trước khi phương pháp khởi tạo sẽ được gọi khi google maps tải kịch bản và do đó đánh dấu không được thêm vì bản đồ không được khởi tạo Thực hiện như sau .... Tạo phương thức riêng TestMarker và gọi điện từ số khởi tạo.

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

Nguồn

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);

Nguồn

2013-09-29 01:19:15 Kris

Đây là phương pháp khác
Bạn cũng có thể sử dụng setCenter phương pháp với thêm marker mới

kiểm tra mã dưới đây

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

Nguồn

2015-02-05 08:09:46

Dưới đây đang làm việc cho tôi:

<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

Nguồn

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>

Nguồn

2017-08-15 10:42:46 Imran

Thêm chức năng Đánh dấu bằng API Google Maps

Trả lời

Các vấn đề liên quan