google-maps-api-3 - Google マップ API は正常に動作しているようですが、画像が表示されません

Question

次のスニペット コードを head タグに追加しました。

 <script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyB94a37qaf6dSM9GqlLAuaLqvTaVBybZpY&sensor=false" type="text/javascript"></script>

    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>

    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

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

    </script>

そしてサイドバーに次のように置きました：

<div id="map-canvas"></div>

そして、Firebug で html コードを見ると、次のようになります。

    <div id="map-canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
    <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
    <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
    <div style="position: absolute; left: 0px; top: 0px; z-index: 1; cursor: url("https://maps.gstatic.com/mapfiles/openhand_8_8.cur"), default;">
    <div style="position: absolute; left: 0px; top: 0px; z-index: 200;">
    <div style="position: absolute; left: 0px; top: 0px; z-index: 101;"></div>
    </div>
    <div style="position: absolute; left: 0px; top: 0px; z-index: 201;">
    <div style="position: absolute; left: 0px; top: 0px; z-index: 102;">
    <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
    <div style="position: absolute; left: 0px; top: 0px; z-index: 1;">
    <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -138px; top: -276px;"></div>
    <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: -138px; top: -20px;"></div>
    <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 118px; top: -276px;"></div>
    <div style="width: 256px; height: 256px; overflow: hidden; position: absolute; left: 118px; top: -20px;"></div>
    </div>
    </div>
    </div>
    <div style="position: absolute; left: 0px; top: 0px; z-index: 103;">
    </div>
    <div style="position: absolute; left: 0px; top: 0px; z-index: 202;">
    <div style="position: absolute; left: 0px; top: 0px; z-index: 104;"></div>
    <div style="position: absolute; left: 0px; top: 0px; z-index: 105;"></div>
    <div style="position: absolute; left: 0px; top: 0px; z-index: 106;"></div>
    </div>
    <div style="position: absolute; left: 0px; top: 0px; z-index: 100;">
    <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
    <div style="position: absolute; left: 0px; top: 0px; z-index: 1;">
    <div style="width: 256px; height: 256px; position: absolute; left: -138px; top: -276px;"></div>
    <div style="width: 256px; height: 256px; position: absolute; left: -138px; top: -20px;"></div>
    <div style="width: 256px; height: 256px; position: absolute; left: 118px; top: -276px;"></div>
    <div style="width: 256px; height: 256px; position: absolute; left: 118px; top: -20px;"></div>
    </div>
    </div>
    </div>
    <div style="position: absolute; z-index: 0; left: 0px; top: 0px;">
    <div style="overflow: hidden;"></div>
    </div>
    <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
    <div style="position: absolute; left: 0px; top: 0px; z-index: 1;">
    <div style="width: 256px; height: 256px; position: absolute; left: -138px; top: -276px; opacity: 1; transition: opacity 200ms ease-out 0s;">
    <img style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="https://mts0.googleapis.com/vt?lyrs=m@229000000&src=apiv3&hl=es-ES&x=234&y=153&z=8&style=59,37%7Csmartmaps" draggable="false">
    </div>
    <div style="width: 256px; height: 256px; position: absolute; left: -138px; top: -20px; opacity: 1; transition: opacity 200ms ease-out 0s;">
    <img style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="https://mts0.googleapis.com/vt?lyrs=m@229000000&src=apiv3&hl=es-ES&x=234&y=154&z=8&style=59,37%7Csmartmaps" draggable="false">
    </div>
    <div style="width: 256px; height: 256px; position: absolute; left: 118px; top: -276px; opacity: 1; transition: opacity 200ms ease-out 0s;">
    <img style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="https://mts1.googleapis.com/vt?lyrs=m@229000000&src=apiv3&hl=es-ES&x=235&y=153&z=8&style=59,37%7Csmartmaps" draggable="false">
    </div>
    <div style="width: 256px; height: 256px; position: absolute; left: 118px; top: -20px; opacity: 1; transition: opacity 200ms ease-out 0s;">
    <img style="width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="https://mts1.googleapis.com/vt?lyrs=m@229000000&src=apiv3&hl=es-ES&x=235&y=154&z=8&style=59,37%7Csmartmaps" draggable="false">
    </div>
    </div>
    </div>
    </div>
    </div>
    <div style="margin: 2px 5px 2px 2px; z-index: 1000000; position: absolute; left: 0px; bottom: 0px;">
    <a style="position: static; overflow: visible; float: none; display: inline;" target="_blank" href="http://maps.google.com/maps?ll=-34.397,150.644&z=8&t=m&hl=es-ES&mapclient=apiv3" title="Haz clic aquí para visualizar esta zona en Google Maps">
    <div style="width: 62px; height: 24px; cursor: pointer;">
    <img style="position: absolute; left: 0px; top: 0px; width: 62px; height: 24px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="https://maps.gstatic.com/mapfiles/google_white.png" draggable="false">
    </div>
    </a>
    </div>
    <div class="gmnoprint" style="z-index: 1000001; position: absolute; right: 123px; bottom: 0px;">
    <div style="height: 19px; -moz-user-select: none; line-height: 19px; padding-right: 2px; padding-left: 50px; background: -moz-linear-gradient(left center , rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.5) 50px) repeat scroll 0% 0% transparent; font-family: Arial,sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right;" draggable="false">
    <a style="color: rgb(68, 68, 68); text-decoration: underline; cursor: pointer; display: none;">Datos de mapa</a>
    <span style="display: none;"></span>
    <span style="display: none;"> - </span>
    <a style="color: rgb(68, 68, 68); text-decoration: underline; cursor: pointer;" href="http://www.google.com/intl/es-ES_US/help/terms_maps.html" target="_blank">Términos de uso</a>
    </div>
    </div>
    <div style="background-color: white; padding: 15px 21px; border: 1px solid rgb(171, 171, 171); font-family: Arial,sans-serif; color: rgb(34, 34, 34); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); z-index: 10000002; display: none; width: 246px; height: 0px; position: absolute; left: 5px; top: 5px;">
    <div class="gmnoscreen" style="position: absolute; right: 0px; bottom: 0px;">
    <div style="font-family: Arial,sans-serif; font-size: 10px; color: rgb(68, 68, 68); direction: ltr; text-align: right; background-color: rgb(245, 245, 245);"></div>
    </div>
    <div class="gmnoprint" style="font-size: 10px; height: 17px; background-color: rgb(245, 245, 245); border: 1px solid rgb(220, 220, 220); line-height: 19px; position: absolute; right: 0px; bottom: 0px;">
    <a target="_new" title="Informar a Google acerca de errores en las imágenes o en el mapa de carreteras" style="font-family: Arial,sans-serif; font-size: 85%; font-weight: bold; bottom: 1px; padding: 1px 3px; color: rgb(68, 68, 68); text-decoration: none; position: relative;" href="http://maps.google.com/maps?ll=-34.397,150.644&z=8&t=m&hl=es-ES&mapclient=apiv3&skstate=action:mps_dialog$apiref:1&output=classic">Informar de un error de Maps</a>
    </div>
    <div class="gmnoprint" style="margin: 5px; -moz-user-select: none; position: absolute; left: 0px; top: 0px;" draggable="false" controlwidth="32" controlheight="84">
    <div style="cursor: url("https://maps.gstatic.com/mapfiles/openhand_8_8.cur"), default; position: absolute; left: 0px; top: 0px;" controlwidth="32" controlheight="40">
    <div style="width: 32px; height: 40px; overflow: hidden; position: absolute; left: 0px; top: 0px;">
    <img style="position: absolute; left: -9px; top: -102px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 1029px; height: 255px;" src="https://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png" draggable="false">
    </div>
    <div style="width: 32px; height: 40px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">
    <img style="position: absolute; left: -107px; top: -102px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 1029px; height: 255px;" src="https://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png" draggable="false">
    </div>
    <div style="width: 32px; height: 40px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">
    <img style="position: absolute; left: -58px; top: -102px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 1029px; height: 255px;" src="https://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png" draggable="false">
    </div>
    <div style="width: 32px; height: 40px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;">
    <img style="position: absolute; left: -205px; top: -102px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 1029px; height: 255px;" src="https://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png" draggable="false">
    </div>
    </div>
    <div class="gmnoprint" style="opacity: 0.6; display: none; position: absolute;" controlwidth="0" controlheight="0">
    <img src="https://maps.gstatic.com/mapfiles/rotate2.png" draggable="false" style="-moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; cursor: pointer; width: 22px; height: 22px;" title="Girar el mapa 90 grados">
    </div>
    <div class="gmnoprint" controlwidth="22" controlheight="39" style="position: absolute; left: 5px; top: 45px;">
    <img style="width: 22px; height: 39px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="https://maps.gstatic.com/mapfiles/szc4.png" draggable="false">
    <div style="position: absolute; left: 0px; top: 0px; width: 22px; height: 17px; cursor: pointer;" title="Acerca la imagen"></div>
    <div style="position: absolute; left: 0px; top: 18px; width: 22px; height: 17px; cursor: pointer;" title="Aleja la imagen"></div>
    </div>
    </div>
    <div class="gmnoprint" style="margin: 5px; z-index: 0; position: absolute; cursor: pointer; right: 0px; top: 0px;">
    <div style="float: left;">
    <div style="direction: ltr; overflow: hidden; text-align: center; position: relative; color: rgb(0, 0, 0); font-family: Arial,sans-serif; -moz-user-select: none; font-size: 13px; background: none repeat scroll 0% 0% rgb(255, 255, 255); padding: 1px 6px; border: 1px solid rgb(113, 123, 135); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); font-weight: bold; min-width: 35px;" draggable="false" title="Muestra el callejero">Mapa</div>
    <div style="background-color: white; z-index: -1; padding-top: 2px; border-width: 0px 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(113, 123, 135) rgb(113, 123, 135); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); position: absolute; left: 0px; top: 24px; text-align: left; display: none;">
    <div style="color: rgb(0, 0, 0); font-family: Arial,sans-serif; -moz-user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 1px 8px 3px 5px; direction: ltr; text-align: left; white-space: nowrap;" draggable="false" title="Muestra el callejero con relieve">
    <span role="checkbox" style="position: relative; line-height: 0; font-size: 0px; margin: 0px 5px 0px 0px; display: inline-block; background-color: rgb(255, 255, 255); border: 1px solid rgb(198, 198, 198); border-radius: 1px 1px 1px 1px; width: 13px; height: 13px; box-shadow: none; vertical-align: middle;">
    <div style="position: absolute; left: 1px; top: -2px; width: 13px; height: 11px; overflow: hidden; display: none;">
    <img style="position: absolute; left: -52px; top: -44px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 68px; height: 67px;" src="https://maps.gstatic.com/mapfiles/mv/imgs8.png" draggable="false">
    </div>
    </span>
    <label style="vertical-align: middle; cursor: pointer;">Relieve</label>
    </div>
    </div>
    </div>

正常に動作しているようですが、画像は表示されません。それは何が原因ですか？

Answer 1

私は混乱しました。それははるかに単純でした。次の HTML コード スニペットを追加するだけで、必要なマップが表示されます。

<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Navarra&amp;aq=&amp;sll=43.131016,-1.5456&amp;sspn=0.140059,0.218697&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Navarra&amp;ll=42.694549,-1.675415&amp;spn=1.211205,1.647949&amp;z=8&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.es/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=Navarra&amp;aq=&amp;sll=43.131016,-1.5456&amp;sspn=0.140059,0.218697&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Navarra&amp;ll=42.694549,-1.675415&amp;spn=1.211205,1.647949&amp;z=8&amp;iwloc=A" style="color:#0000FF;text-align:left">Ver mapa más grande</a></small>