1) head内に下記のコードを追加する。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, "load", function () {
var map = document.getElementById("map_canvas");
var options = {
zoom: 10,
center: new google.maps.LatLng(35.686773, 139.68815)
};
new google.maps.Map(map, options);
});
</script>
※モバイル端末などでGPSセンサーを使用する場合は「sensor=true」として下さい。 2) body内に下記のコードを追加する。
<div id="map_canvas" style="width: 300px; height: 300px"></div>これで下記のような300pxの正方形のマップが表示されると思います。
全コードは下記のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>グーグルマップの表示</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, "load", function () {
var map = document.getElementById("map_canvas");
var options = {
zoom: 10,
center: new google.maps.LatLng(35.686773, 139.68815)
};
new google.maps.Map(map, options);
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 300px; height: 300px"></div>
</body>
</html>
styleの300pxを変更することで好きな大きさのマップにする事が出来ます。次回からオプションの設定や色々な使い方などを紹介して行きたいと思います。
0 件のコメント:
コメントを投稿