How to add markers (POIs) in Google Maps?

In this article we will see how to add POIs or so-called markers in Google Maps; In a last article titled Geolocation With JavaScript And Google Maps we saw how to create a Google Maps map on a web page; Basically we need to follow the following steps:

Include the link to the Google Map JavaScript API: <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
The div where we want the Google Map to be drawn: <div id="map" style="width:500px; height:500px"></div>

And the function to draw the map: // Function that shows the location of objects in 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);
}

First we establish the coordinates where we position the camera: // coordinates myLatlng = { Lat: "10.49063", Lng: "-66.886965" };

The next thing is to configure the map options: initial zoom, position and the type of map are some of them: // Object used for manipulating the map options.

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

Now we indicate where the map will be drawn, in the previous div: // I build the map map = new google.maps.Map(document.getElementById("map"),mapOptions);

POI

Geolocalización

JavaScript

Google Maps

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy