0

tengo el siguiente codigo en la cual me muestra la zona de ubicacion que estoy especificando, pero se podra marcar con una imagen(.jpg) que quiera agregar el lugar que yo quiera. osea que me salga la imagen donde estoy poniendo la latitud y longitud?

este es el codigo:

<!DOCTYPE html>
<html>
<head>
 <title> INSERTAR MAPA EN GOOGLE MAPS</title>


 <script src="http://maps.googleapis.com/maps/api/js"> </script>

 <script>

 function init(){
    var mapOption = {
     center: new google.maps.LatLng(-12.06244,-77.12272),
     zoom: 15,
     mapTypeId:google.maps.MapTypeId.ROADMAP
    };
   var map = new google.maps.Map(document.getElementById("map"),mapOption);

  }

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

 </script>


  </head>
  <body>

  <div id="map" style="width:1000px; height: 800px; border: solid; border-color: #00FFFF  "></div>


</body>
</html>

1 respuesta 1

2

Agrega un marker (marcador) a tu mapa:

// Define tu marcador (pon la url de tu imagen en la propiedad **icon**)
var marker = new google.maps.Marker({
    position: { lat: -12.06244, lng: -77.12272 }, // aca defines las coordenadas
    icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
});
// Agregar tu marcador al mapa
marker.setMap(map);

de acuerdo a tu código lo pondrías en:

function init(){
   var mapOption = {
     center: new google.maps.LatLng(-12.06244,-77.12272), 
     zoom: 15,
     mapTypeId:google.maps.MapTypeId.ROADMAP
   };
   var map = new google.maps.Map(document.getElementById("map"),mapOption);

   // Define tu marcador (pon la url de tu imagen en la propiedad **icon**)
   var marker = new google.maps.Marker({
      position: { lat: -12.06244, lng: -77.12272 }, // aca defines las coordenadas
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
   });
   // Agregar tu marcador al mapa
   marker.setMap(map);
}

Editado:

Para mostrar 2 o mas marcadores:

function init(){
   var mapOption = {
     center: new google.maps.LatLng(-12.06244,-77.12272),
     zoom: 15,
     mapTypeId:google.maps.MapTypeId.ROADMAP
   };
   var map = new google.maps.Map(document.getElementById("map"),mapOption);

   // Marcador 1
   var marker = new google.maps.Marker({
      position: { lat: -12.06244, lng: -77.12272 }, // coodernadas del marcador 1
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
   });
   marker.setMap(map);

   // Marcador 2
   var marker2 = new google.maps.Marker({
      position: { lat: -12.06444, lng: -77.12472 }, // coordenadas del marcador 2
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
   });
   marker2.setMap(map);
}

El resultado son 2 marcadores en el mapa introducir la descripción de la imagen aquí

6
  • erick, añadi tu codigo y funciono excelente. pero tengo una consulta mas, como hago para que se pueda ver varios puntos, osea mostrar 2 a mas ubicaciones
    – user83889
    el 12 nov. 2018 a las 0:27
  • Vuelve a añadir otro marker, var marker2 = .. , y de ahi marker2.setMap(map); el 12 nov. 2018 a las 0:30
  • lo añadi pero solo me muestra lo ultimo, y no el primero... como haria?
    – user83889
    el 12 nov. 2018 a las 1:43
  • mira mi respuesta editada, es para 2 marcadores el 12 nov. 2018 a las 1:54
  • ayaa, yo estaba duplicando desde"var mapOptions..." . entonces si funciona normalmente. una consulta mas erick, y si en vez de añadir una imagen, añado un mensaje y una imagen a la vez... como lo haria?
    – user83889
    el 12 nov. 2018 a las 17:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.