Exemple d'ús de la API de google maps
Aquest exemple d’ús del google maps simplement et permet clicar a qualsevol lloc del mon i et dona les seves coordenades geoespaials (latitud i longitud), així com el nivell de zoom que tens sel•leccionat en aquest moment.
Exemple
friky foto
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAQuvme-
wzLxdLG7lOn3FP_xSk01GX8HRGO2zJZLZcsVppjw1c
ZBQN6K9Y1TwTGNZ2mcRxNzdau0tUdg" type="text/javascript" ></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.setMapType(_SATELLITE_TYPE);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(2.1451, 41.3925), 0);
GEvent.addListener(map, "click", function(p_overlay, p_point)
{
alert("Has clicat a "+p_point.y+" latitud i "+p_point.x+" longitud amb zoom: "+map.getZoomLevel());
});
</script>
</body>
</html>
Anem a analitzar les línees interessants:
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAQuvme-
wzLxdLG7lOn3FP_xSk01GX8HRGO2zJZLZcsVppjw1cZBQN6K9Y1TwTGN
Z2mcRxNzdau0tUdg" type="text/javascript"></script>
Carrega el script de google maps, però validant que el crides des de la url que has indicat al crear la teva gmaps API Key, atenció per crear una API Key li has d’indicar quina url exacte tindrà el fitxer que la carregui, no nomes el nom del domini, sinó també el directori, o sigui, aquesta en concret, esta creada per http://www-org.lavanguardia.es/gmaps així que qualsevol intent de cridar el javascript amb aquesta clau des de un altre directori no tindrà resultat i donarà error.
var map = new GMap(document.getElementById("map"));
Crea una variable de tipus GMap, indicant-li a quin DOM node el pintarem, en aquest cas hem creat un div adient al pas anterior amb el id="map"
map.setMapType(_SATELLITE_TYPE);
Assignem al mapa el aspecte de SATELLITE, no de carrerer, per la senzilla raó que de moment només existeixen carreres de UK i dels USA.
Atenció, aquí hi ha un bug a la documentació de la API de gmaps, no es G_SATELLITE_TYPE sinó _SATELLITE_TYPE, suposo que ho arreglaran, però de moment, amb _SATELLITE_TYPE funciona i amb G_SATELLITE_TYPE, no.
map.addControl(new GLargeMapControl());
Això crea el control de zoom típic del gmaps a la esquerra del mapa, atenció a la documentació només posa com crear el GSmallMapControl, que es nomes un + i un - per fer zoom in i zoom out, però sense la barra d’escala, que jo trobo força útil.
map.addControl(new GMapTypeControl());
Afegeix la possibilitat de canviar de Map a Satellite View.
map.centerAndZoom(new GPoint(2.1451, 41.3925), 0);
Fixa la latitud i la longitud a la Plaça Francesc Macià (a pinyó) i li fica zoom=0, que es el nivell de més detall
GEvent.addListener(map, "click", function(p_overlay, p_point)
{
alert("Has clicat a "+p_point.y+" latitud i "+p_point.x+" longitud amb zoom: "+map.getZoomLevel());
});
Creem un listener del event "click", perquè quan algú cliqui a qualsevol punt del mapa es mostri un alert amb la latitud i la longitud del mapa així com el nivell de zoom actual del mapa visualitzat.
Podeu veure la demo funcionant aquí
Per més informació sobre la API cliqueu aquí
1 comentario:
A la web d'alpinisme i muntanyisme Alpinaut.com també trobem coordenades de llocs sobre escalada, barranquisme, espeleo, raquetes de neu, esquí, vies ferrades, etc.
Publicar un comentario