技術メモのかけら

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

Google Map

現在地の地図を表示する

//

クリックした場所の住所を表示する

// 住所:

住所を指定して地図を表示する

// geocorder.getCodeに住所を指定して検索する var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': '東京都板橋区' }, function(result, status) { if (status == google.maps.GeocoderStatus.OK) { var latlng = result[0].geomet…

マーカーに情報WIndowを仕込む

// Markerのclickイベントに情報windowを開くロジックを仕込む。 google.maps.event.addListener(marker, 'click', function() { info.open(map, marker); });

情報ウィンドウを表示する

// InfoWindowをnewする。contentにメッセージ内容、positionに開く場所を指定する。 var info = new google.maps.InfoWindow({ content: '東京スカイツリーです', position: map.getCenter() }); openの引数にmapオブジェクトを指定して開きます。 info.ope…

ドラッグ可能なマーカーを追加する

// マーカーのオプションにdraggable:trueを追加する <script type="text/javascript"> var map; $(function(){ 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.M…

クリックでマーカーする

// イベントリスナーにクリック時のイベントを追加し、マーカーを追加する処理を追加する。 <script type="text/javascript"> var map; $(function(){ var latlng = new google.maps.LatLng(35.710089,139.809948); var opts = { zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP, cente…

地図を作成

// 仕事で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に設定。 次に地図を表示させる場所…