Google Maps + Iframe + Automático

originalconcept · #1 (**permalink**) 10/02/2009, 17:43

Buenas;

tengo un formulario web, en donde uno de los campos a completar es la locación del lugar.

Ahora quisiera agarrar esa dirección que me da el formulario y de alguna forma que se muestre en un IFRAME usando google maps, que directamente me muestre el lugar marcado en el mapa, simplemente desde una direccion ejemplo asi: "san isidro, buenos aire"

Es posbile, como hago para que el iframe interprete esa direccion y me la muestre automaticamente sin necesidad de un link en el mapa?

gracias, espero que alguien sepa la solución

trasgukabi · #2 (**permalink**) 10/02/2009, 18:02

Esta es la URL que Google te enseña al buscar eso que dices. Adaptarlo a que sea esa búsqueda u otra es muy fácil.

http://maps.google.com/maps?f=q&sour...s&ie=UTF8&z=11

originalconcept · #3 (**permalink**) 10/02/2009, 18:05

Claro, pero desde un IFRAME es difenrete, porque yo en el IFRAME sólo quiero que se muestre el mapa, no con todo el resto.

Código:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=san+isidro,+buenos+aires&amp;ie=UTF8&amp;z=11&amp;iwloc=addr&amp;ll=-35.1985,-59.582977&amp;output=embed&amp;s=AARTsJr8MTiDYtxY_vmoGvFk-KRzn_waoQ"></iframe><br />

Pero si modifico solo esto, me tira error:

Código HTML:

http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=san+isidro,+buenos+aires&amp;ie=UTF8&amp;z=11&amp;iwloc=addr&amp;ll=-35.1985,-59.582977&amp;output=embed&amp;s=AARTsJr8MTiDYtxY_vmoGvFk-KRzn_waoQ

hgp147 · #4 (**permalink**) 10/02/2009, 18:07

Mira esto: http://www.victorblasco.es/google_ma..._dummies_2.php

originalconcept · #5 (**permalink**) 10/02/2009, 18:12

Cita:

Iniciado por hgp147

Mira esto: http://www.victorblasco.es/google_ma..._dummies_2.php

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo Marcas</title>
<script src= "http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAg_2UIEV5rd9OVgNSGNfsyxTaN__vuAQAUAfJwnfsk7h_mauWkxSYbIJkdkwH1e7uYk7faoLIELG-Tw"
      type="text/javascript"></script>
<script type="text/javascript">
    function load() {
        if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(0,0), 0);
            map.addControl(new GSmallMapControl());
            map.addControl(new GScaleControl());
            map.addControl(new GMapTypeControl());
            var center = new GMarker(map.getCenter());
            map.addOverlay(center);
        }
    }
</script>
</head>

<body onLoad="load()" onUnload="GUnload()">
    <div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>

Y esto de donde salió:

Código HTML:

http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAg_2UIEV5rd9OVgNSGNfsyxTaN__vuAQAUAfJwnfsk7h_mauWkxSYbIJkdkwH1e7uYk7faoLIELG-Tw

Lo que necesito es que me lo interprete desde una simple direccio: san isisdro, buenos aires, argentina, que se completa desde un formulario

hgp147 · #6 (**permalink**) 10/02/2009, 18:19

Mira este ejemplo que es similar a lo queres: http://www.victorblasco.es/gm/example6.html

Hace algo así:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo Colocar</title>
<script src= "http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAg_2UIEV5rd9OVgNSGNfsyxTaN__vuAQAUAfJwnfsk7h_mauWkxSYbIJkdkwH1e7uYk7faoLIELG-Tw"
      type="text/javascript"></script>
<script type="text/javascript">
	function load(lugar) {
		if (GBrowserIsCompatible()) {
			var map = new GMap2(document.getElementById("map"));
			map.setCenter(new GLatLng(0,0), 0);
			map.addControl(new GSmallMapControl());
			map.addControl(new GScaleControl());
			map.addControl(new GMapTypeControl());
			GEvent.addListener(map, "click", function(overlay, point){ 
				if(overlay){ 
					if(overlay.title)
						map.openInfoWindowHtml(overlay.getPoint(), overlay.title);
				}
			});
			var geocoder = new GClientGeocoder();
			geocoder.getLatLng(lugar, function(point) {
				if (!point) {
					alert("Lugar no encontrado");
				} else {
					map.setCenter(point, 12);    // 12 indica el valor de zoom
					var center = new GMarker(map.getCenter());
					center.title = lugar;
					map.addOverlay(center);
					map.openInfoWindowHtml(center.getPoint(), center.title);
				}
			});
			var center = new GMarker(map.getCenter());
    		center.title = "Centro del mapa";
			map.addOverlay(center);
			map.openInfoWindowHtml(center.getPoint(), center.title);
		}
	}
</script>
</head>

<body onUnload="GUnload()">
<input type="text" name="lugar" id="lugar" />
<input type="button" value="Enviar" onclick="load(document.getElementById('lugar').value);" />
	<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>

Esto: ABQIAAAAg_2UIEV5rd9OVgNSGNfsyxTaN__vuAQAUAfJwnfsk7 h_mauWkxSYbIJkdkwH1e7uYk7faoLIELG-Tw es la api key

originalconcept · #7 (**permalink**) 10/02/2009, 18:27

Cita:

Iniciado por hgp147

Mira este ejemplo que es similar a lo queres: http://www.victorblasco.es/gm/example6.html

Hace algo así:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo Colocar</title>
<script src= "http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAg_2UIEV5rd9OVgNSGNfsyxTaN__vuAQAUAfJwnfsk7h_mauWkxSYbIJkdkwH1e7uYk7faoLIELG-Tw"
      type="text/javascript"></script>
<script type="text/javascript">
    function load(lugar) {
        if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(0,0), 0);
            map.addControl(new GSmallMapControl());
            map.addControl(new GScaleControl());
            map.addControl(new GMapTypeControl());
            GEvent.addListener(map, "click", function(overlay, point){ 
                if(overlay){ 
                    if(overlay.title)
                        map.openInfoWindowHtml(overlay.getPoint(), overlay.title);
                }
            });
            var geocoder = new GClientGeocoder();
            geocoder.getLatLng(lugar, function(point) {
                if (!point) {
                    alert("Lugar no encontrado");
                } else {
                    map.setCenter(point, 12);    // 12 indica el valor de zoom
                    var center = new GMarker(map.getCenter());
                    center.title = lugar;
                    map.addOverlay(center);
                    map.openInfoWindowHtml(center.getPoint(), center.title);
                }
            });
            var center = new GMarker(map.getCenter());
            center.title = "Centro del mapa";
            map.addOverlay(center);
            map.openInfoWindowHtml(center.getPoint(), center.title);
        }
    }
</script>
</head>

<body onUnload="GUnload()">
<input type="text" name="lugar" id="lugar" />
<input type="button" value="Enviar" onclick="load(document.getElementById('lugar').value);" />
    <div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>

Esto: ABQIAAAAg_2UIEV5rd9OVgNSGNfsyxTaN__vuAQAUAfJwnfsk7 h_mauWkxSYbIJkdkwH1e7uYk7faoLIELG-Tw es la api key

De donde sale esto:

Código:

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

hgp147 · #8 (**permalink**) 10/02/2009, 19:48

Anda a http://code.google.com/intl/es/apis/maps/ para registra la api para tu dominio (en localhost no necesitas api).

<script src= "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAg_2UIEV5rd9O VgNSGNfsyxTaN__vuAQAUAfJwnfsk7h_mauWkxSYbIJkdkwH1e 7uYk7faoLIELG-Tw"
type="text/javascript"></script>

Luego cambia: ABQIAAAAg_2UIEV5rd9OVgNSGNfsyxTaN__vuAQAUAfJwnfsk7 h_mauWkxSYbIJkdkwH1e7uYk7faoLIELG-Tw por la de tu dominio

originalconcept · #9 (**permalink**) 11/02/2009, 05:12

Cita:

Iniciado por hgp147

anda a http://code.google.com/intl/es/apis/maps/ para registra la api para tu dominio (en localhost no necesitas api).

<script src= "http://maps.google.com/maps?file=api&v=2&key=abqiaaaag_2uiev5rd9o vgnsgnfsyxtan__vuaqauafjwnfsk7h_mauwkxsybijkdkwh1e 7uyk7faolielg-tw"
type="text/javascript"></script>

luego cambia: abqiaaaag_2uiev5rd9ovgnsgnfsyxtan__vuaqauafjwnfsk7 h_mauwkxsybijkdkwh1e7uyk7faolielg-tw por la de tu dominio

gracias