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