GoogleMapに円を描くJavaScript

GoogleMap
2016-03-28 - 更新:2016-03-30

GoogleMap上に円を描く方法をご紹介します。

CircleOptionsクラス

1var myCircleOptions = {
2    center: null,           // 中心の座標
3    clickable: true,        // クリックの可否（デフォルトtrue）
4    draggable: false,       // ドラッグの可否（デフォルトfalse）
5    editable: false,        // 編集の可否（デフォルトfalse）
6    fillColor: "#ffffff",   // 塗り潰しの色
7    fillOpacity: 0.7,       // 塗り潰しの不透明度 0.0～1.0
8    map: map,               // GoogleMapのインスタンス
9    radius: 0,              // 半径（単位：m）
10    strokeColor: "#6090ff", // 線の色
11    strokeOpacity: 0.9,     // 線の不透明度 0.0～1.0
12    strokePosition: 
13        google.maps.StrokePosition.CENTER, // 線の位置（CENTER|INSIDE|OUTSIDE）
14    strokeWeight: 3,        // 線の太さ（単位：ピクセル）
15    visible: true,          // 表示の有無（デフォルトtrue）
16    zIndex: 1               // 重なり順
17}

設定したオプションを利用してサークルオブジェクトを作成します。

`1`	`myCircle =` `new` `google.maps.Circle(myCircleOptions);`

マップを後から設定する場合は

`1`	`myCircle.setMap(map);`

公式リファレンスはこちらから
https://developers.google.com/maps/documentation/javascript/reference#Circle

GoogleMap, JavaScript

4,723 views

Google StreetView Image API

GoogleMap
2015-10-07

Googleストリートビューを静的な画像として表示する方法をご紹介します。
GoogleStaticMapのようにimgタグを使って表示することが可能です。

形式

`1`	`<img` `src="https://maps.googleapis.com/maps/api/streetview?[パラメーター]"` `alt="">`

パラメーター

location	緯度経度
size	表示する画像のサイズ ※最大640×640
heading	カメラの方位（0～360） 0=北
pitch	カメラのアングル（90～-90） 90=上 -90=下
fov	カメラの水平視野（0～120） 0=狭い 120=広い
zoom	カメラのズーム（0～5） 0=遠い 5=近い
key	APIキー

API Keyの使用が推奨されているようです。
API KeyはGoogle Developer ConsoleでStreet View Image APIを有効にすると使用できるようになります。
続きを読む…»

GoogleMap, JavaScript, ストリートビュー

3,177 views

GoogleMap イベントリスナーの追加と削除

GoogleMap
2015-07-30 - 更新:2018-02-21

GoogleMap API v3でのイベントの追加と削除について

GMapインスタンスを生成

1var myOptions = {
2    center: new google.maps.LatLng(35, 135),
3    zoom: 12
4};
5 
6var map = new google.maps.Map(document.getElementById("map"), myOptions);

例１）「zoom_changed」イベントを追加します。

`1`	`google.maps.event.addListener(map,` `"zoom_changed",` `function(){ });`

例２）「click」イベントを追加します。

`1`	`google.maps.event.addListener(map,` `"click",` `function(e){ });`

指定したイベントリスナーを削除する

`1`	`google.maps.event.clearListeners(map,` `"zoom_changed");`

全てのイベントリスナーを削除する

`1`	`google.maps.event.clearInstanceListeners(map);`

リスナーをオブジェクトとして作成し、そのインスタンスを指定してリスナーを削除する

1var zoomChanged_listener = google.maps.event.addListener(map, "zoom_changed", function(){ 
2 
3});
4 
5google.maps.event.removeListener(zoomChanged_listener);

イベントの種類については下記をご参照ください。
[GoogleMap v3のmapオブジェクトのイベント]

2016年10月31日追記

GoogleMapの読み込み完了時に一度だけ実行するイベントを追加

`1`	`google.maps.event.addListenerOnce(map,` `"idle",` `function(){ });`

リサイズの場合はトリガーを使用します。

1// divリサイズ時mapイベント
2google.maps.event.addListener(map, "resize", function(LatLng)
3{
4    map.setCenter(LatLng, 10);
5});
6 
7// divリサイズ時mapイベントのトリガー
8document.getElementById("map").onresize = function()
9{
10    var LatLng = map.getCenter();
11    google.maps.event.trigger(map, "resize", LatLng);
12}

GoogleMap, JavaScript

6,785 views

複数のマーカーを地図内に全て表示させるには

GoogleMap
2015-07-22 - 更新:2015-09-29

GoogleMap(v3)にて、複数追加したマーカーが
全て表示されるように位置と拡大比率を自動調整する機能があります。

以下のメソッドを使います。
google.maps.Map::fitBounds(bounds:LatLngBounds)

マップオブジェクトを生成します。

`1`	`var` `map =` `new` `google.maps.Map(document.getElementById("map"));`

表示領域を生成します。

`1`	`var` `bounds =` `new` `google.maps.LatLngBounds();`

表示領域にマーカーの位置を追加

1bounds.extend(new google.maps.LatLng(35.705506, 139.752048)); //東京ドーム
2bounds.extend(new google.maps.LatLng(35.633232, 139.882006)); //東京ディズニーランド
3bounds.extend(new google.maps.LatLng(35.710349, 139.811346)); //東京スカイツリー

表示領域を地図に反映させます。

`1`	`map.fitBounds (bounds);`

GoogleMap, JavaScript

4,791 views

リンクでGoogleMap地図アプリを起動する

GoogleMap
2014-07-03 - 更新:2014-08-19

リンクを貼って指定した場所をGoogleMapの地図アプリで表示させることができます。
スマートフォン対応サイトや、メールで正確な場所を送りたいときに便利です。

メールで送る場合はURL部分だけでOKです。

※与える座標は世界測地系(WGS84)です。

`1`	`<a` `href="http://maps.google.com/maps?q=35.65860811863414,139.7455318066551">地図を表示</a>`

上記だと座標が名称として表示されるので、任意に名称を指定したい場合は以下のようにします。

1<a href="http://maps.google.com/maps?q=35.65860811863414,139.7455318066551+東京タワー">地図を
2 
3表示</a>

Android, GoogleMap, HTML, iPhone

14,392 views