Indicar a la API de Google Maps una ubicación concreta

schattenburg · #1 (**permalink**) 21/03/2011, 11:33

Hola a todos:

Estoy utilizando por primera vez la API de Google Maps para poder incluir mapas en un sitio web y ya Google me ha dado mi clave correspondiente.

Por lo que me indica Google debo incluir en mi web el siguiente código:

<script src="http://maps.google.com/maps?file=api&v=2&key=la_clave_que_sea"
type="text/javascript"></script>

Mi pregunta es la siguiente, ¿cómo le indico que muestre una ubicación concreta del mapa? Es decir, quiero que al cargarse el mapa siempre salga por defecto la calle Pepito de los Palotes, 21 Madrid

¿cómo le paso ese parámetro?

Gracias

maycolalvarez · #2 (**permalink**) 21/03/2011, 19:32

consultando en la api, puedes tanto indicarle las coordenadas como indicarle ese parámetro a buscar...

según tengo entendido, la api versión 3 no requiere de clave.

Naahuel · #3 (**permalink**) 21/03/2011, 20:49

Así es, la última versión de la api no requiere key exclusiva para cada dominio.

Leé este sencillísimo tutorial, explica todo muy bien:
http://code.google.com/intl/es-419/apis/maps/documentation/javascript/tutorial.html

Para saber la latitud y longitud de una ubicación podés usar este sitio:
http://www.itouchmap.com/latlong.html
Ponés la dirección del lugar que querés y después copiás los valores en Latitude y Longitude para pasárselos a la configuración de tu mapa:

Código Javascript:

Ver originalvar myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

Así de fácil.

schattenburg · #4 (**permalink**) 22/03/2011, 03:54

Muchas gracias. Me ha funcionado perfectamente.

schattenburg · #5 (**permalink**) 23/03/2011, 11:01

Tengo otra duda. Estoy leyendo la documentación de la API de los Google Maps y no encuentro la manera de que en el mapa salga esa especie de chincheta que indica la posición exacta donde se encuentra la dirección indicada.

¿Qué parámetro hay que pasarle para que se muestre?

Gracias

Naahuel · #6 (**permalink**) 23/03/2011, 11:18

Te pongo un código de ejemplo bastante generalizado. Fijate en las variables que debes cambiar para adaptarlo a tu código. Le puse las opciones más utilizadas como el marcador y el globito de información. Saludos.

Código HTML:

<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
	//establecer ubicacion en coordenadas
	var posicion = ['-34.6084175', '-58.3731613']; //<----- indica aqui tus coordenadas [LAT, LONG]
    var latlng = new google.maps.LatLng(posicion[0], posicion[1]);
	
    //opciones generales
	var id_mapa = "map_canvas"; //<----- ID del contenedor de tu mapa
	var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
	//crear globito
	var globito = '<div><strong>Esta ubicacion</strong><br><p>Aca pongo la descripcion de mi ubicacion</p></div>'; //<--- codigo HTML de tu globito
	var infowindow = new google.maps.InfoWindow();
	
	//crear mapa
    var map = new google.maps.Map(document.getElementById(id_mapa), myOptions);
	
	//asignar marcador a map
	marker = new google.maps.Marker({
		position: new google.maps.LatLng(posicion[0], posicion[1]),
		map: map
	});

	 //asignar globito al marcador al hacer click
	google.maps.event.addListener(marker, 'click', (function(marker) {
	return function() {
	  infowindow.setContent(globito);
	  infowindow.open(map, marker);
	}
	})(marker));
}

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:600px; height:600px"></div>
</body>
</html>