Google Maps

Cambiar iconos en Google Maps

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.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *