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