Blog
Hoy vamos a seguir con el tema de Google Maps como lo hicimos en los anteriores tutoriales, en el último hemos visto cómo crear un evento click sobre un marker, hoy aprenderemos a cambiar iconos en Google Maps, ya que a veces los que vienen incluidos por defecto no se adecuan con el diseño de nuestras aplicaciones o sitios webs.
¿Cómo cambiar iconos en Google Maps?
Realizar esta tarea es muy fácil, solamente debemos indicar el path de la nueva imagen al objeto marker a través del parámetro icon. En el siguiente código podemos ver un ejemplo completo:
<!DOCTYPE html> <html style="height:100%"> <head> <title>Cambiar iconos 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!', icon: 'path/to/icon.png' // Path al nuevo icono }); } // 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>
Si no disponemos de los iconos, les recomiendo mirar el artículo en el cual se explica cómo conseguir iconos gratis para Google Maps.
Bueno gente, espero que les sea de gran utilidad este breve tutorial y ante cualquier inconveniente no duden en dejar un comentario.