Agregar función de Marcador con la API de Google Maps

Tengo el siguiente Javascript que incluye la función estándar de Google Maps API initialize() y la función personalizada addMarker(). El mapa se cargará bien, pero el marcador no se agregará al mapa.Agregar función de Marcador con la API de 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>

Fuente

2011-10-09 Quaye

Revise este tutorial para una solución completa. http://webdesignpluscode.blogspot.com.tr/2016/02/how-to-add-markerpin-on-google-map.html –

Usted ha añadido el método de marcadores Añadir llamada fuera de la función y que hace que se ejecute antes de que el método initialize que se llamará cuando los mapas de Google cargas de guión y por lo tanto no se añade el marcador porque el mapa no se ha inicializado Haga lo siguiente ... Cree el método por separado TestMarker y llámelo desde inicialice.

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

Fuente

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

Fuente

2013-09-29 01:19:15 Kris

Este es otro método
También puede utilizar setCenter método de añadir nuevo marcador

de verificación a continuación código

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

Fuente

2015-02-05 08:09:46

A continuación código funciona para mí:

<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

Fuente

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>

Fuente

2017-08-15 10:42:46 Imran

Agregar función de Marcador con la API de Google Maps

Respuesta

Cuestiones relacionadas