[APORTE] Google Maps en la web

nfo · #1 (**permalink**) 01/11/2008, 09:03

Os dejo este aporte para que introduzcais el mapa de google maps en vuestra web

-Lo primero que teneis que hacer es genera una API en google http://code.google.com/apis/maps/signup.html

-la que esta puesta es para localhost.

google nos proporcionara un codigo html bueno sustituimos el primer script por la nueva API

Código:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAc6OydJUPJZ8WWILn2c7koxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSP1hduXkDo2xUlQKUf7vsh-DRtVQ" type="text/javascript"></script>

ahora llega la magia si queremos que nuestro mapa solo tenga un punto fijo tendremos que poner geocoder.getLatLng.

Código:

   			// Localizamos el punto
   			geocoder.getLatLng(
   			"madrid",
				function(point) {
					// Si encontramos el punto
					if (point) {
						// Marcamos el punto
						map.setCenter(point, 15);
						map.addControl(new GSmallMapControl());
						map.addControl(new GMapTypeControl());;
						var marker = new GMarker(point);
						map.addOverlay(marker);
					}else{
						// Ocultamos el mapa
						document.getElementById("map").style.display = "none";
					}
				}

Si lo que queremos es que se busque el sitio pues solo bastaria con recoger el valor del campo input y asignarle una variable donde pone Madrid(parto con que ya sabeis hacer eso)

Y por ultimo con las funciones. Podremos cambiar el aspecto el "15" nos da el zoom por defecto, y las funciones addControl son el zoom de control y las pestañas de hibrido, map, satelite.

Código:

map.setCenter(point, 15);
map.addControl(new GSmallMapControl();
map.addControl(new GMapTypeControl();

Os dejo el codigo completo.

index.html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAc6OydJUPJZ8WWILn2c7koxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSP1hduXkDo2xUlQKUf7vsh-DRtVQ" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
    	if (GBrowserIsCompatible()) {   
    		var map = new GMap2(document.getElementById("map"));
    		geocoder = new GClientGeocoder();
   			// Localizamos el punto
   			geocoder.getLatLng(
   			"madrid",
				function(point) {
					// Si encontramos el punto
					if (point) {
						// Marcamos el punto
						map.setCenter(point, 15);
						map.addControl(new GSmallMapControl();
						map.addControl(new GMapTypeControl();
						var marker = new GMarker(point);
						map.addOverlay(marker);
					}else{
						// Ocultamos el mapa
						document.getElementById("map").style.display = "none";
					}
				}
			);
	}
}
//]]>
</script>

  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

GatorV · #2 (**permalink**) 01/11/2008, 12:54

Tema trasladado a Javascript.