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&v=2&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&v=2&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>