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.