Poner un icono dentro de Google Maps

21/Jun/2009 Google , , , , , , 2 Comentarios

Para poner un icono dentro de Google Maps lo que tenemos que hacer es poner una marca. La marca está representada mediante la clase GMarker.

Los primeros pasos son los de siempre y que podéis leer detenidamente en Cargando Google Maps. Si bien, resumidamente, consisten en:

  1. Cargar Google Maps
    1. <script src="http://maps.google.com/maps?file=api&v=2&key=miclave" type="text/javascript"></script>
  2. Definir un área para el mapa
    1. <div id="mapa" style="width: 400px; height: 300px;"></div></script>
  3. Instanciar el mapa
    1. if (GBrowserIsCompatible()) {
    2. map = new GMap(document.getElementById("mapa"));
    3. map.setCenter(new GLatLng(40.655997,-4.700518), 15);
    4. }

Lo siguiente que pasaremos a realizar será la carga del icono dentro de Google Maps. Para ello creamos una instancia de la clase GMarker.

  1.  
  2. var marker = new GMarker(new GLatLng(40.655997,-4.700518));
  3.  

La clase GMarker recibe como parámetro un punto: ya sea relativo al mapa (GPoint) o una Latitud-Longitud (GlatLng). En nuestro caso nos hemos decantado por la segunda opción y hemos pasado como parámetro de la clase GMarker una clase GlatLng.

Una vez creada la marca tendremos que insertarla dentro del mapa. Para ello utilizamos el método .addOverlay() de la clase GMap2. Finalmente nos quedan dos líneas de código muy sencillas, las cuales nos permiten poner un icono dentro de Google Maps.

  1.  
  2. var marker = new GMarker(new GLatLng(40.655997,-4.700518));
  3. map.addOverlay(marker);
  4.  

2 comentarios en “Poner un icono dentro de Google Maps”

Víctor Cuervo

Sergio

Vaya.. tan simple y tan bueno.. lei muchos montañas de codigo inservible, y tu en simples pasos me has dado la respuesta. gracias

Víctor Cuervo

German

cómo le agrego un link ? hacer click y que muestre un texto ? Gracias

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*