Встраивание Google Maps IFRAME

Благодаря острому и проницательному взгляду моего коллеги мы нашли проблему.

Во-первых, кажется, что он появляется только на бельгийских картах, http://maps.google.be, (афаик , очевидно), а не на http://maps.google.com.

При вызове содержимого IFRAME Google перенаправляет содержимое IFRAME на тот же URL-адрес, но с добавлением ?wmode=transparent.

Браузер не допускает использование нескольких '?' в URL-адресе, поэтому действие прерывается.

Чинить:

Используйте тот же URL-адрес, сгенерированный Google Maps, но просто добавьте следующее:

&wmode=transparent

У вас точно есть параметр &output=embed querystring в источнике iframe? Если вы не включите это, Google не отправит правильные заголовки ответов X-Frame-Options, и вы получите описанную вами ошибку.

Можете ли вы показать фрагмент представления MVC, в котором отображается карта?

Я не мог получить какие-либо различные предложения в Интернете для встраивания ссылки на карту Google в iframe.

В итоге я использовал API карт Google, сгенерировав исходный код, заполнив поля по адресу:

http://www.map-embed.com/

и изменение полученного кода в соответствии с моими целями.

Вы можете использовать приведенную выше ссылку, чтобы сгенерировать код для своей собственной карты, а затем, при желании, использовать мой код с долготой и широтой, созданными вышеуказанным веб-сайтом, скопированным в мой код. Вы также можете вставить свой собственный html в «контент» ниже, независимо от того, что производит указанный выше веб-сайт.

<?php

// IE won't work with percentage height and FF won't work with em units.
// Simple code here assumes if  browser isn't IE, then is FF; 
// And I don't care about other browsers.
//

$height =  "$browser" == 'ie' ? '25em' : '99%' ;

$width  =  "$browser" == 'ie' ? '99%'  : '99%' ;

echo <<<XXXEODXXX

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>

  <div                    style="height:$height; width:$width; overflow:hidden;">

    <div id="gmap_canvas" style="height:$height; width:$width;">

    </div>

    <style>

      #gmap_canvas 

        img

        {
          max-width:none!important; 
          background:none!important
        } 

    </style>

  </div>

  <script type="text/javascript">

    google.maps.event.addDomListener               ( window, 'load', init_map );

    function init_map ()

      { var myOptions = { zoom:12, center:new google.maps.LatLng ( 41.1889495, -104.1781593 ), mapTypeId:google.maps.MapTypeId.ROADMAP };

        map           = new google.maps.Map        ( document.getElementById ( "gmap_canvas" ), myOptions );

        marker        = new google.maps.Marker     ( {map: map, position: new google.maps.LatLng( 41.1889495, -104.1781593 ) } );

        infowindow    = new google.maps.InfoWindow ( { content:"<b>Biz Name</b><br/>Biz Street Address<br/>Biz City, State Zip<br/>Biz Phone" } );

        google.maps.event.addListener              ( marker, "click", function () { infowindow.open ( map, marker ); } );

        infowindow.open                            ( map, marker );
      }

  </script>

XXXEODXXX;

?>