技術メモのかけら

内容はもとより調べたことすら忘れてしまうので個人的なメモです。とにかく短く、結論だけ書いていきます。

地図を作成

仕事で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。

 

マーカーを追加。