Blog
La API Google Maps es actualmente muy utilizada por los programadores de sitios webs y aplicaciones móviles, ya que nos ofrece miles de funcionalidades interesantes para trabajar. En este tutorial aprenderemos a crear un evento click sobre un marker en Google Maps.
¿Cómo crear un evento click sobre un marker en Google Maps?
Para registrar un evento click sobre un marker vamos a utilizar la función addListener, la cual recibe como parámetro el tipo de evento y la función a ejecutar. En el siguiente ejemplo se puede apreciar como funciona:
<!DOCTYPE html> <html style="height:100%"> <head> <title>Evento click sobre un marker en Google Maps</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> html, body{ height:100%; margin: 0px; } #googleMap{ width:100%; height:100%; } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { // Configuración del mapa var mapProp = { center: new google.maps.LatLng(-34.5862088, -58.415677500000015), zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP }; // Agregando el mapa al tag de id googleMap var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); // Creando un marker en el mapa var marker = new google.maps.Marker({ position: new google.maps.LatLng(-34.5862088, -58.415677500000015), map: map, title: 'Hello World!' }); // Evento click sobre el marker creado marker.addListener('click', function() { map.setZoom(8); map.setCenter(marker.getPosition()); }); } // Inicializando el mapa cuando se carga la página google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap"></div> </body> </html>
Simplemente al hacer click sobre el marker se va a cambiar el zoom del mapa, manteniendo el centro.
Bueno gente, espero que les sea de gran utilidad este tutorial. Ante cualquier problema no duden en dejar un comentario.
Buenos dias!
Una consulta que no me estoy dando cuenta, si tuviera que al darle click a un marcador que me lleve a otra pagina como se puede hacer? por ejemplo le hago click al marcado “URUGUAY” y que me lleve a una pagina con datos de uruguay.
Estoy empezando hacer un proyecto y eso me ayudaria mucho,
Gracias,
Disculpa las molestias Saludos
Hola Cristian, reemplaza la línea 35 por esto:
// Evento click sobre el marker creado
marker.addListener(‘click’, function() {
window.location.href = ‘https://www.google.com’
});
Hola tengo una duda por favor si puedes ayudarme, quiero que al presionar el marker se habrá una ventana modal con la información de esa ubicación como seria ? mira esto llevo
HTML
Documento sin título
JAVASCRIPT
myMap = L.map(‘myMap’).setView([-35.675147, -71.542969], 5)
L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {
maxZoom: 18,
}).addTo(myMap);
marker = L.marker([-35.675147, -71.542969]).addTo(myMap)
iconMarker = L.icon({
iconUrl: ‘market2.png’,
iconSize: [60, 60],
iconAnchor: [30, 60]
})
iconMarker1 = L.icon({
iconUrl: ‘images.png’,
iconSize: [60, 60],
iconAnchor: [30, 60]
})
marker2 = L.marker([-29.9, -71.25], { icon: iconMarker }).addTo(myMap)
marker3 = L.marker([-29.905399, -71.2498137 ], { icon: iconMarker1 }).addTo(myMap)
marker2.addListener(‘click’, function() {
});
aqui el html
HTML
Documento sin título
hola podrías ayudarme por favor, tengo una duda quiero que al presionar el marker me abra una ventana modal para que se pueda ver información sobre esa ubicación ya sea características, contactos etc., como podría hacerlo ? que me habra una ventana modal por favor
javascript
myMap = L.map(‘myMap’).setView([-35.675147, -71.542969], 5)
L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {
maxZoom: 18,
}).addTo(myMap);
marker = L.marker([-35.675147, -71.542969]).addTo(myMap)
iconMarker = L.icon({
iconUrl: ‘market2.png’,
iconSize: [60, 60],
iconAnchor: [30, 60]
})
iconMarker1 = L.icon({
iconUrl: ‘images.png’,
iconSize: [60, 60],
iconAnchor: [30, 60]
})
marker2 = L.marker([-29.9, -71.25], { icon: iconMarker }).addTo(myMap)
marker3 = L.marker([-29.905399, -71.2498137 ], { icon: iconMarker1 }).addTo(myMap)
marker2.addListener(‘click’, function() {
});