技術メモのかけら

内容はもとより調べたことすら忘れてしまうので個人的な技術メモを残しているブログです。Qiitaの記事にするほどでもない細かいネタを投稿します。

地図を作成

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

 

マーカーを追加。