Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de Indicar a la API de Google Maps una ubicación concreta en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/03/2011, 11:33
 
Fecha de Ingreso: junio-2007
Mensajes: 285
Antigüedad: 12 años, 4 meses
Puntos: 5
Indicar a la API de Google Maps una ubicación concreta

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
  #2 (permalink)  
Antiguo 21/03/2011, 19:32
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 11 años, 2 meses
Puntos: 1532
Respuesta: Indicar a la API de Google Maps una ubicación concreta

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.
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 21/03/2011, 20:49
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 8 años, 7 meses
Puntos: 192
Respuesta: Indicar a la API de Google Maps una ubicación concreta

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 original
  1. var myLatlng = new google.maps.LatLng(-34.397, 150.644);
  2. var myOptions = {
  3.   zoom: 8,
  4.   center: myLatlng,
  5.   mapTypeId: google.maps.MapTypeId.ROADMAP
  6. };

Así de fácil.
  #4 (permalink)  
Antiguo 22/03/2011, 03:54
 
Fecha de Ingreso: junio-2007
Mensajes: 285
Antigüedad: 12 años, 4 meses
Puntos: 5
Respuesta: Indicar a la API de Google Maps una ubicación concreta

Muchas gracias. Me ha funcionado perfectamente.
  #5 (permalink)  
Antiguo 23/03/2011, 11:01
 
Fecha de Ingreso: junio-2007
Mensajes: 285
Antigüedad: 12 años, 4 meses
Puntos: 5
Respuesta: Indicar a la API de Google Maps una ubicación concreta

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
  #6 (permalink)  
Antiguo 23/03/2011, 11:18
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 8 años, 7 meses
Puntos: 192
Respuesta: Indicar a la API de Google Maps una ubicación concreta

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> 

Etiquetas: api, google, maps
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 00:46.