[JavaScript] Google Map APIで表示した地図にビル名や施設名が表示されない (Google Map APIによる施設の表示)

このページのタグ:[HTML] [JavaScript] [Google Map]
以下のHTMLを配置します。Google Map APIを使用してシンプルな地図を表示します。

map-org.html


<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  function initialize() { 
    var mapstyle = [
    {
     featureType:"all",
     elementType:"all",
     stylers: [
        {visibility: "on" }
      ]
    }
    ];

    var latlng = new google.maps.LatLng(35.681143,139.767165); 
    var myOptions = { 
      zoom: 15, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
  } 
 
</script> 
</head> 
<body onload="initialize()"> 
  <div style="width:780px">
  <div style="float:left;width:256px;">
    Googleマップをページ内に表示<br/>
    マップの操作もできますよ<br/>
  </div>
  <div id="map_canvas" style="float:left;width:512px; height:512px;"></div> 
  <div style="clear:left;"></div>
  </div>
</body> 
</html>
ブラウザでmap-org.htmlファイルを表示します。下図の画面が表示されます。


東京駅周辺を拡大してみると、いくつかビルやビル名が無いことがわかります。コンビニのアイコンも表示されていません。


Google Mapのサイトで同じ場所を拡大して表示したものです。ビルや、ビル名、施設名、コンビニのアイコンなどが表示されていることがわかります。


Google Map APIで mapTypeIdをgoogle.maps.MapTypeId.ROADMAPに設定しただけでは一部の商業施設やビル、施設は表示されないようです。

対策

Google Map APIで施設などを表示する場合は以下のコードを用います。

map-detail-html


<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  function initialize() { 
    var mapstyle = [
    {
     featureType:"all",
     elementType:"all",
     stylers: [
        {visibility: "on" }
      ]
    }
    ];

    var latlng = new google.maps.LatLng(35.681143,139.767165); 
    var myOptions = { 
      zoom: 15, 
      center: latlng, 
     mapTypeIds: [
        'mainmap', 
        google.maps.MapTypeId.HYBRID,
        google.maps.MapTypeId.SATELLITE,
        google.maps.MapTypeId.TERRAIN 
      ]
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
    
    var styleMapOptions = {
     map: map,
     name:"地図"
    }
    var myMapType = new google.maps.StyledMapType(mapstyle, styleMapOptions);
    map.mapTypes.set('mainmap', myMapType);
    map.setMapTypeId('mainmap');
  } 
 
</script> 
</head> 
<body onload="initialize()"> 
  <div style="width:780px">
  <div style="float:left;width:256px;">
    Googleマップをページ内に表示<br/>
    マップの操作もできますよ<br/>
  </div>
  <div id="map_canvas" style="float:left;width:512px; height:512px;"></div> 
  <div style="clear:left;"></div>
  </div>
</body> 
</html>
Webブラウザで作成したmap-detail.htmlにアクセスします。正しく動作すれば下図の画面が表示されます。


東京駅の周辺を拡大すると、一部の商業施設と施設名やコンビニのアイコンが表示されることを確認できます。


登録日 :2011-06-08    最終更新日 :2011-06-17
このページのタグ:[HTML] [JavaScript] [Google Map]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)