以下の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にアクセスします。正しく動作すれば下図の画面が表示されます。
東京駅の周辺を拡大すると、一部の商業施設と施設名やコンビニのアイコンが表示されることを確認できます。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2017-09-07
作成日: 2011-06-08
