2011-03-08 13 views
10

Tengo un mapa de Google incrustado en un iframe. Algo así como:Iphone/Ipad Google Maps Iframe incrustado

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" 
marginwidth="0" src="http://maps.google.de/?ie=UTF8&amp;ll=51.151786,10.415039& 
amp;spn=23.5119,51.723633&amp;t=h&amp;z=5&amp;output=embed"></iframe> 

En los navegadores esto está bien pero el Iphone/Ipad intenta cargar una aplicación. Lo cual parece funcionar bien (no tengo uno yo mismo), pero la página se carga y el usuario recibe un mensaje emergente que le pregunta si quiere ejecutar la aplicación. ¿Hay alguna forma de mostrar el mapa en el Iframe?

+0

Interesante pregunta. No puedo decir que haya visto un sitio web que hizo esto. Siempre parece cargar una aplicación. De acuerdo, no uso mucho el navegador web de mi iPhone ... –

Respuesta

7

Creo que la manera más fácil es cargar Google Maps usando la API de Google Maps directamente.

Me enfrenté recientemente al problema y encontré el código en this tutorial muy completo y útil.

+0

¡Funciona genial, gracias! – Flo

+0

¿Puede explicar esto con más detalle? Tengo un mapa de Google en la página de contacto de nuestro sitio web, incrustado de acuerdo con el código que Google Maps me dio. No funciona en un iPhone. Al hacer clic en "ver mapa más grande" o algo similar, me lleva a la aplicación Google Maps, que funciona, pero el mapa en el sitio web aparece en blanco, con el siguiente texto: "Iniciar sesión, ver en dispositivos móviles | Clásico, (c) 2012 - Privacidad, carga ... 'con' Mobile' seleccionado y 'Cargando ...' tiene un ícono que gira para siempre. – Xonatron

+0

Desafortunadamente, creo que las personas usarán el método de inserción en primer lugar porque es mucho más fácil que usar la API. – sam

-1

supongo que no es la forma correcta de cargar un googleMap en html/iFrame ...

me interesaba demasiado, así es como me las arreglé (y funciona bien en un marco flotante): el uso de "Apple iWeb" widget de mapa de google ... es un software de bajo costo ...

es mi código hTML en "myGoogleMap.html" (después de que destrocé todo el hTML usado):

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> 
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

    <meta name="iWeb-Build" content="local-build-20110308" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
    <meta name="viewport" content="width=700" /> 
    <title>Testo 
</title> 
    <link rel="stylesheet" type="text/css" media="screen,print" href="Vuoto_files/Vuoto.css" /> 
    <!--[if lt IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Vuoto_files/VuotoIE.css'/><![endif]--> 
    <!--[if gte IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Media/IE8.css'/><![endif]--> 
    <script type="text/javascript" src="Scripts/iWebSite.js"></script> 
    <script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script> 
    <script type="text/javascript" src="Scripts/Widgets/GoogleMap/GoogleMap.js"></script> 
    <script type="text/javascript" src="Vuoto_files/Vuoto.js"></script> 
    </head> 
<body style="background: rgb(0, 0, 0) margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();"> 

    <div class="com-apple-iweb-widget-GoogleMap aboveStrokesAndFrames" id="widget1" 
    style="height: 400px; left: 0px; opacity: 1.00; position: absolute; top: 0px; width: 320px; z-index: 1; "> 
    </div> 

    <script type="text/javascript"><!--//--><![CDATA[//><!-- 
new GoogleMap('widget1', 'Scripts/Widgets/GoogleMap', 'Scripts/Widgets/SharedResources', '.', {"language": "it", "showInfo": "0", "locatedAddressIsFromGeocoder": "1", "unlocatedAddress": "", "zoomLevel": "6", "center": "51.261915,10.151367", "locatedAddressPoint": "19.56661,-99.134932", "locatedAddress": "my address in Mexico, Pico de Orizaba 3A, Lomas de Cuautepec, Delegazione Gustavo A. Madero, Cittá del Messico, Distrito Federal, Messico", "showGoogleBar": "1", "showMarker": "1", "showZoom": "1"}); 
//--><!]]> 
    </script> 
</body> 
</html> 

y lo cargo en otro html con esto:

<iframe width="320" height="400" frameborder="0" scrolling="no" marginheight="0" 
marginwidth="0" src="Sito-test/myGoogleMap.html"> 
</iframe> 

por supuesto que necesita el código JavaScript hecha por iWeb también, pero no estoy seguro de que puedo demostrar legalmente ellos ...

de todos modos, el punto es que ahora sabes que es posible cargarlo en un iFrame sin la "pregunta de instalación de la aplicación" ...