Desarrollo web godzilla

Published on febrero 21st, 2012 | by Miguel Angel Berlanga Alvarez

2

Tutorial Google Maps II ** Insertar marcas

Insertar marcas dentro de Google Maps II v3

Seguimos con el tutorial de Google Maps (v3), en este caso vamos a situar una marca en la posición que queremos dentro del mapa, para esto tenemos que escribir el siguiente código:

 new google.maps.Marker({
	    position: new google.maps.LatLng(14.6203, 102.09),
	    icon: 'images/flecha.png',
	    map: map,	   
	   title: 'GodZilla!!'		
	});

Podemos utilizar una imagen nuestra para poner una marca en el mapa, o bien podemos utilizar las que utiliza Google habitualemente, que se encuentran en esta ruta:

http://gmaps-samples.googlecode.com/svn/trunk/markers/

En nuestro ejemplo vamos a colocar varias marcas, en este caso vamos a situar tres Godzillas sobre el mapa, y este es el resultado:

google maps godzilla

El código que hemos utilizado es este:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">// <![CDATA[
 
// ]]></script><script type="text/javascript">// <![CDATA[
      function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(12.570648483963033, 101.44157409667969),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
 
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
 
      gozilla2 = new google.maps.Marker({
	    position: new google.maps.LatLng(12.570648483963033, 101.44157409667969),
	    icon: 'images/flecha.png',
	    map: map,	   
	    title: 'GodZilla!!'	
	});
 
      gozilla3 = new google.maps.Marker({
	    position: new google.maps.LatLng(13.6203, 101.09),
	    icon: 'images/flecha.png',
	    map: map,	   
	   title: 'GodZilla!!'		
	});
 
      gozilla = new google.maps.Marker({
	    position: new google.maps.LatLng(14.6203, 102.09),
	    icon: 'images/flecha.png',
	    map: map,	   
	   title: 'GodZilla!!'		
	});
      }
 
// ]]></script>

Si quieres, puedes ver aquí un ejemplo funcionando con imágenes insertadas en google maps.

Tags: , , , ,


About the Author



2 Responses to Tutorial Google Maps II ** Insertar marcas

  1. carlos peña says:

    hola amigo mucho gusto
    soy nuevo en esto y me gustaría saber si es posible que cuando yo le de clic a un marcador en vez de mostrarme un mensaje me envié a otra pagina con un id o algo asi hehe

    disculpa si lo que digo es muy loco soy demasiado novato hehe

    gracias por tu respuesta

    • Ber says:

      Hola Carlos,

      Personalmente no he hecho nada así, aunque es problable que en el API de Google puedas encontrar algo parecido ya. Si no, es posible que con jQuery puedas hacerlo “sin muchos problemas”.

      Un saludo

Deja un comentario

Tu dirección de correo electrónico no será publicada.


8 − = uno

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top ↑