この記事は、最後の更新から1623日を超えています。
2017.11.19 / 2017.12.7 update
※新規記事にて、使いやすくしたプラグインを配布しています。
Googleマップをwebページに埋め込む場合、Googleが提供しているAPIを使って座標やアイコンを設定します。しかし、毎回コードを書き直していると面倒なので、関数化してファイルを読み込むだけで使えるようにしています。そのうちきっちりコードを整理したいのですが、とりあえずコードを載せておきます。
関数を使う前に、Google Maps API からキーを入手してください。
※今後、入手方法も記事にしたいと思います。
キーを入手したら、下記コードをコピーし、名前を付けて保存(ここではmymap.js)
/* 引数 → 表示する要素のid名, 緯度,経度, 拡大率, マップ名, アイコンURL,アイコン横幅,アイコン縦幅 */
function initialize(mymap_id, mymap_lat,mymap_lng, mymap_zoom, mymap_name, mymap_icon,icon_width,icon_height) {
var latlng = new google.maps.LatLng(mymap_lat,mymap_lng);
var myOptions = {
zoom: mymap_zoom,
center: latlng,
scrollwheel: false,
mapTypeControlOptions: { mapTypeIds: ['mapid', google.maps.MapTypeId.ROADMAP] }
};
var map = new google.maps.Map(document.getElementById(mymap_id), myOptions);
if( mymap_icon=='' ){
var markerOptions = {
position: latlng,
map: map,
title: mymap_name
};
}else{
var icon = new google.maps.MarkerImage(mymap_icon,
new google.maps.Size(icon_width,icon_height),
new google.maps.Point(0,0)
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: mymap_name
};
}
var marker = new google.maps.Marker(markerOptions);
var styleOptions = [
{
"stylers": [
{ "visibility": "simplified" }
]
}
];
var styledMapOptions = { name: mymap_name }
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('mapid', sampleType);
map.setMapTypeId('mapid');
}
あとは、下記コードを参考にapstyle.jsを読みこんでみてください。
<body>
<div>
<p>Google Maps APIで指定したドメインでのみ表示可能。</p>
<div id="mymap" style="width: 100%; height: 400px;"></div>
</div>
<!-- Google Maps APIで取得したキーを指定してAPIを読み込み -->
<script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを指定"></script>
<!-- マップ作成用のjavascriptを読み込み -->
<script type="text/javascript" src="./mymap.js"></script>
<!-- 座標などを指定して、マップ作成 -->
<!-- 下記スクリプトは、</body>の直前に書くか、読み込みを遅らせること -->
<script>
google.maps.event.addDomListener(
window, 'load',
initialize(
//'表示する場所のid名', 座標1, 座標2, ズーム倍率(17ぐらいが妥当),
'mymap',35.710058, 139.810694, 17,
//'地図の名前','アイコンのパス(空にすればデフォルト)',アイコンファイルの横幅,アイコンファイルの高さ
'スカイツリー','',0,0
)
);
</script>
</body>
関連記事
©dgcolor.info