Insertar marcas Google Maps v3 *** codifica.me

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:

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.