¿Cómo agregar markers (POIs) en Google Maps?

01-05-2014 - Andrés Cruz

¿Cómo agregar markers (POIs) en Google Maps? In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

En este artículo veremos como agregar POIs o los llamados markers en Google Maps; en un artículo pasado titulado Geolocalización Con JavaScript Y Google Maps vimos como crear un mapa de Google Maps en una página web; básicamente necesitamos seguir los siguientes pasos:

  • Incluir el enlace a la API de JavaScript de Google Map: <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  • El div en donde deseamos que se dibuje el mapa de Google Map: <div id="map" style="width:500px; height:500px"></div>

Y la función para dibujar el mapa: // Funcion que muestra la ubicacion de los objetos en Google Maps:

function DibujarMapa()
{
    // coordenadas
    myLatlng = {
        Lat: "10.49063",
        Lng: "-66.886965"
    };

    // Objeto utilizado para la manipulación de las opciones del mapa.
    var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(myLatlng.Lat, myLatlng.Lng),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // construyo el mapa
    map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
}
  • Primero establecemos las coordenadas en donde posicionamos la cámara:     // coordenadas    myLatlng = {        Lat: "10.49063",        Lng: "-66.886965"    };

Lo siguiente es configurar las opciones del mapa: zoom inicial, posición y el tipo de mapa son algunas de ellas:     // Objeto utilizado para la manipulación de las opciones del mapa.

   var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(myLatlng.Lat, myLatlng.Lng),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

Ahora indicamos en donde se dibujara el mapa, en el div anterior:     // construyo el mapa    map = new google.maps.Map(document.getElementById("map"),mapOptions);


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!