地図を作成
仕事でGoogle Mapを使うことになったので超基本的な使い方を自習。
何はともあれGoogle Mapのjsファイルを読み込みます。
<script charset="UTF-8" type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
パラメータのAPI Keyは必須じゃないようなので今回は指定しない。センサーも使わないのでfalseに設定。
次に地図を表示させる場所を指定します。
<div id="map" style="width: 500px; height: 400px;"> </div>
divタグに好きなidをつけて高さと幅を指定しておきます。
続けてjavascriptで地図のオブジェクトを作って先ほどのdivタグにはめこみます。 今回はjqueryのdocument.readyに書きました。
var map; var latlng = new google.maps.LatLng(35.710089,139.809948); var opts = { zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; map = new google.maps.Map(document.getElementById("map"), opts);
割と簡単に地図が表示できました。なぜかペグマンが細長いがとりあえず良しとしよう。
mapTypeIdをgoogle.maps.MapTypeId.SATELLITEに変更。
HYBRID。
TERRAIN。スカイツリーだと面白くないので富士山。
zoom: 0, zoomControl: false。
マーカーを追加。