version3になってから、APIキーの取得が必要なくなりました。微妙に面倒だったので嬉しい変更。
まず以下のコードをヘッダに配置します。
クエリ部分のsensorは位置センサのことなので、PCサイトならfalseで問題ありません。スマフォとか用ならtrueで。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
で、bodyにこれを書く。
function initialize() { var myOptions1 = { zoom: 16, center: new google.maps.LatLng(32.389663, 130.395575), mapTypeId: google.maps.MapTypeId.ROADMAP } var map1 = new google.maps.Map(document.getElementById("gmap1"),myOptions1); var myLatLng1 = new google.maps.LatLng(32.389663, 130.395575); var marker1 = new google.maps.Marker({ position: myLatLng1, map: map1, title:"TITLE HERE" }); } initialize(); //googlemapの呼び出し
マップ生成の部分をinitialize関数にして呼び出します。
オプションとかパラメータはなんかちょっと面倒なので説明は割愛。名前見りゃたいてい分かるでしょう。
で、mapを表示したい部分にはこういうコードを書くと。
<div id="gmap1" style="width:300px; height:250px"></div>
idは呼び出しのスクリプトで指定したのと同じものを指定する必要があります。
縦横幅はワンソースで分かるようにスタイルタグで書きましたが、cssで指定しても全然構いません。
ひとまずこれで設置終了。
v3になってからいろいろ地図のスタイルが選べるようになったみたいですが、別にゴテゴテさせる気もないのでシンプルに表示しました。
この投稿へのコメント