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

- Andrés Cruz

In english

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

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.

!Cursos desde!

10$

En Udemy

Quedan 4d 13:49!


Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!