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

POI

Geolocalización

JavaScript

Google Maps

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy