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);
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter