差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

--- javascript:google-mapper-v3 [2011/03/03 23:07]
dgbadmin [Google Mapを表示する]
+++ javascript:google-mapper-v3 [2015/09/22 14:38] (現在)
dgbadmin [ソースコード] 0.7.1
@@ ライン 3: / ライン 3: @@
 （更新履歴とコメントは[[http://0-oo.net/log/category/javascript/google-mapper/|Google Mapper Archive - ゼロと無限の間のログ]]でどうぞ。）
-{{:php-tool-box:map-japan.gif|}}
+{{http://maps.google.com/maps/api/staticmap?center=38%2C137&zoom=5&sensor=false&size=400x460&markers=color%3Ared%7Clabel%3AA%7C%E6%9C%AD%E5%B9%8C&markers=color%3Ablue%7Clabel%3AB%7C%E4%BB%99%E5%8F%B0&markers=color%3Aorange%7Clabel%3AC%7C%E6%9D%B1%E4%BA%AC&markers=color%3Agreen%7Clabel%3AD%7C%E5%90%8D%E5%8F%A4%E5%B1%8B&markers=color%3Agray%7Clabel%3AE%7C%E5%A4%A7%E9%98%AA&markers=color%3Ayellow%7Clabel%3AF%7C%E5%BA%83%E5%B3%B6&markers=color%3Apurple%7Clabel%3AG%7C%E7%A6%8F%E5%B2%A1&.png?}}
-[[http://code.google.com/intl/ja/apis/maps/documentation/v3/|Google Maps APIのバージョン3（V3）]]が公開されたので、[[google mapper|Google Mapper]]もそれに対応させてみた。
+[[https://developers.google.com/maps/|Google Maps APIのバージョン3（V3）]]が公開されたので、バージョン2用に作った[[google mapper|Google Mapper]]とは別に、Google Maps API V3用の「Google Mapper V3」を書き直した。\\
+これを使えば、普通に地図を表示する他にも、ストリートビューの表示、Google AdSenseの表示、httpsでのアクセス（SSLで暗号化されたセキュアなページの表示）など、いろいろなことを手軽に実現できる。
-Google Maps API V3は<del>まだLabs版でV2に比べて実装されている機能が少ない</del>公式版になったけどまだV2の全ての機能を実装していないので、元のGoogle Mapperは残しておいて、それとは別に新しくGoogle Mapper V3を書き直した。
+（上記の画像はGoogle Maps API V3ではなく[[php-tool-box/google-maps-static-api|Google Static Maps API]]で表示している。）
@@ ライン 13: / ライン 14: @@
 [[http://0-oo.net/sam/google-mapper/|Google Mapper V3 動作サンプル]]
-[[http://0-oo.net/hotel/|ホテル 旅館 × 地図から検索]] （応用例）
+[[http://0-oo.net/sam/google-mapper/geolocation.php|Google Mapper V3で現在地を取得する動作サンプル（スマートフォンにも対応）]]
+[[http://0-oo.net/sam/google-mapper/drawing.php|Google Mapper V3で長方形や円や自由図形や折れ線を描くサンプル]]
+[[https://0-oo.github.io/sam/google-mapper-v3-over-https.html|Google Mapper V3をHTTPSで表示するサンプル]]
+[[http://0-oo.net/hotel/|ホテル 旅館 × 地図から検索]] （応用例 1）
+[[http://0-oo.net/misc2/weather|天気速報 Tweets on the Map]] （応用例 2）
+[[http://0-oo.net/misc2/tweetmap|なんでも速報 Tweets on the Map]] （応用例 3）
+[[http://0-oo.net/misc2/100k|Flic 100K (ふりく百景)]] （応用例 4、位置情報の取得あり）
@@ ライン 21: / ライン 34: @@
 ===== ダウンロード =====
-[[http://0-oo.googlecode.com/svn/google-mapper-v3.js|google-mapper-v3.js]]
+[[http://g.0-oo.net/google-mapper-v3.js|google-mapper-v3.js]]
 ※ダウンロードできるのは最新のBeta版の場合もあります
@@ ライン 28: / ライン 41: @@
 ===== 使い方の例 =====
-==== 準備 ====
+Google Mapper V3のソースコードの中に書いてあるGoogleMapper.demo()も参考に。 ;-)
-<code html>
+==== Google Maps APIのJavaScriptを読み込む ====
-<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false"></script>
+<code javascript>
-<script type="text/javascript" src="/path/to/your/google-mapper-v3.js"></script>
+GoogleMapper.load(function() {
+    //読み込んだ後に行う処理
+});
 </code>
-あとは、ソースコードの中のGoogleMapper.demo()を参考に。 ;-)
-例えばこんなことができる。
 ==== Googleマップを表示する ====
@@ ライン 51: / ライン 61: @@
 </code>
-==== アイコン画像を指定してマーカーを表示する ====
+=== アイコン画像を指定してマーカーを表示する ===
 <code javascript>
 GoogleMapper.addMarker(35.7, 139.7, "東京", iconUrl);
 </code>
-==== 色を指定してマーカーを表示する ====
+=== 色を指定してマーカーを表示する ===
 <code javascript>
 GoogleMapper.addColorMarker(34.7, 135.5, "大阪", "FF0");
 </code>
-==== 色を指定してマーカーを表示して、その中に文字を表示する ====
+=== 色を指定してマーカーを表示して、その中に文字を表示する ===
 <code javascript>
 GoogleMapper.addColorMarker(34.7, 135.5, "大阪", "FF0", "000", "虎");
 </code>
-==== 吹出し型のマーカーを表示する ====
+=== 吹出し型のマーカーを表示する ===
 <code javascript>
-var naha = GoogleMapper.addBubbleMarker(26.2, 127.7, "那覇");
+GoogleMapper.addBubbleMarker(26.2, 127.7, "那覇");
 </code>
-==== 日本列島表示時にちょうどよい沖縄のミニ地図を表示する ====
+==== 地図とストリートビューを並べて表示する ====
+デフォルトではストリートビューは地図の領域に表示されるので、地図とストリートビューを並べてみることができない。\\
+それでは惜しいので、地図の横にdiv要素を用意して下記のようにすれば、地図とストリートビューを並べて表示できる。
 <code javascript>
-GoogleMapper.showOkinawa();
+GoogleMapper.setStreetView(streetViewId);
 </code>
-==== 逆ジオコーディングして地名をタイトルバーに表示する ====
+==== 広告（Google AdSense）を表示する ====
+AdSenseを表示するには、あらかじめGoogle MapsのJavaScriptの読み込みでライブラリとしてAdSenseを指定しておく必要がある。
+<code javascript>
+GoogleMapper.load(function() {
+    GoogleMapper.show(mapDivID);
+    GoogleMapper.showAds("AdSenseのPublisher ID");
+}, "adsense");
+</code>
+==== 現在位置を取得する ====
+iPhoneやAndroidの他、ノートPCでもWi-Fiから現在位置を取得できる。iPhoneだとタイムアウトする？
+<code javascript>
+GoogleMapper.getCurrentPosition(function(latLng) {
+    // （略）
+});
+</code>
+==== 地名、駅名、施設名等から緯度経度を取得する（ジオコーディング） ====
+<code javascript>
+GoogleMapper.search("静岡", function(response, status) {
+    if (GoogleMapper.checkResponseStatus(status)) {
+        var latLng = GoogleMapper.getGeocodeLatLng(response[0]);
+        //（以下省略）
+    }
+});
+</code>
+==== 緯度経度から住所を取得する（逆ジオコーディング） ====
 <code javascript>
 GoogleMapper.searchByLatLng(latLng, function(response, status) {
     if (GoogleMapper.checkResponseStatus(status)) {
-        document.title = GoogleMapper.getGeocodeAddress(response[0]);
+        var address = GoogleMapper.getGeocodeAddress(response[0]);
+        //（以下省略）
     }
 });
 </code>
-==== 二つの地点間の車または徒歩の道順を表示する ====
+==== 車または徒歩での道順案内を表示する ====
+さらにストリートビューと合わせて見ると面白い。
 <code javascript>
-if (GoogleMapper.demo.startFlg) { //スタート地点指定済みの場合
+var startFlg = false;
-    GoogleMapper.demo.startFlg = false;
+if (startFlg) { //スタート地点指定済みの場合
+    startFlg = false;
     GoogleMapper.direct(latLng);
     return "";
 }
-GoogleMapper.demo.startFlg = false;
+startFlg = false;
-GoogleMapper.demo.startRouting = function(mode) {
+var startRouting = function(mode) {
     GoogleMapper.mapClickable = false;
-    GoogleMapper.demo.startFlg = true;
+    startFlg = true;
     GoogleMapper.direct(latLng, mode, routerPanelId);
     GoogleMapper.closeInfoWindow();
@@ ライン 112: / ライン 155: @@
 for (var mode in modes) {
     h += '<input type="button" value="' + modes[mode] + 'の場合"';
-    h += ' onclick="GoogleMapper.demo.startRouting(';
+    h += ' onclick="startRouting(';
-    h += 'google.maps.DirectionsTravelMode.' + mode + ')" /> ';
+    h += 'google.maps.TravelMode.' + mode + ')" /> ';
 }
 </code>
-==== 地名や施設名等で検索する（ジオコーディング） ====
+==== 日本列島の地図を表示した時にちょうどよいサイズの沖縄のミニ地図を画面右下よりに表示する ====
+日本列島と一緒に沖縄も表示させたい。
 <code javascript>
-function search(keywordInputId) {
+GoogleMapper.showOkinawa([markers]); //あれば沖縄に表示するMarkerの配列を渡す
-    var searchBox = document.getElementById(keywordInputId);
-    GoogleMapper.search(searchBox.value);
-    searchBox.focus();
-};
-</code>
-==== 広告（Google AdSense）を表示する ====
-<code javascript>
-GoogleMapper.showAds("AdSenseのPublisher ID");
-</code>
-なお、AdSenseを表示するには、Google MapsのJavaScriptの読み込みでライブラリとしてAdSenseを指定する必要がある。
-<code html>
-<script type="text/javascript" src="http://maps.google.co.jp/maps/api/js?sensor=false&amp;libraries=adsense"></script>
-<script type="text/javascript" src="google-mapper-v3.js"></script>
 </code>
@@ ライン 143: / ライン 172: @@
  *  GoogleMapper V3 - (The Wrapper Class of Google Maps API V3)
  *  @see       http://0-oo.net/sbox/javascript/google-mapper-v3
- *  @version   0.4.0
+ *  @version   0.7.1
- *  @copyright 2008-2011 dgbadmin@gmail.com
+ *  @copyright 2008-2015 dgbadmin@gmail.com
  *  @license   http://0-oo.net/pryn/MIT_license.txt (The MIT license)
  *
  *  See also Google Maps API V3 documents.
- *  @see http://code.google.com/intl/ja/apis/maps/documentation/javascript/
+ *  @see https://developers.google.com/maps/documentation/javascript/reference
- *  @see http://code.google.com/intl/en/apis/maps/documentation/javascript/reference.html
  */
 var GoogleMapper = {
     /** Mapオブジェクト */
     map: null,
+    /** マーカーの配列 */
+    markers: [],
+    /** 吹き出し */
+    infoWindow: null,
     /** Mapをクリック可能か（beClickable()内でのmapのclickイベントの制御用） */
-    mapClickable: false,
+    mapClickable: false
+};
-    /** 最後に開いた吹き出しオブジェクト */
+/**
-    lastInfoWindow: null,
+ *  Google Maps API V3のJavaScriptを読み込む
+ *  @param  Function    callback    読み込み完了時に実行するCallback関数
-    /** 地名による検索時にリスト表示する最大件数 */
+ *  @param  String      libraries   (Optional) 追加ライブラリ（複数の場合はカンマ区切り）
-    maxCount: 10
+ *  @param  Boolean     sensor      (Optional) 位置情報を使用するかどうか
+ */
+GoogleMapper.load = function(callback, libraries, sensor) {
+    GoogleMapper._onload = callback;
+    var params = [
+        "callback=GoogleMapper._onload",
+        "libraries=" + (libraries || ""),
+        "sensor=" + (sensor || false)
+    ];
+    var script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = "//maps.googleapis.com/maps/api/js?" + params.join("&");
+    document.getElementsByTagName("head")[0].appendChild(script);
 };
 /**
@@ ライン 170: / ライン 215: @@
  *  @param  Number  lng     中心地点の経度
  *  @param  Number  zoom    ズーム値
+ *  @param  Object  options (Optional) Mapに渡すパラメータ
+ *  @return Map
+ *  @see https://developers.google.com/maps/documentation/javascript/reference#MapOptions
  */
-GoogleMapper.show = function(mapId, lat, lng, zoom) {
+GoogleMapper.show = function(mapId, lat, lng, zoom, options) {
-    GoogleMapper.map = new google.maps.Map(document.getElementById(mapId), {
+    var params = {
         center: new google.maps.LatLng((lat || 38), (lng || 137.5)),
         zoom: (zoom || 5),
         mapTypeId: google.maps.MapTypeId.ROADMAP,
-        scaleControl: true
+        styles: [   //コンビニ等、全ての情報を表示する
-    });
+            { featureType: "all", elementType: "all", stylers: [{ visibility: "on" }] }
+        ],
+        scaleControl: true,
+        overviewMapControl: true,
+        overviewMapControlOptions: { opened: true }
+    };
+    for (var i in (options || {})) {
+        params[i] = options[i];
+    }
+    GoogleMapper.map = new google.maps.Map(document.getElementById(mapId), params);
+    GoogleMapper.infoWindow = new google.maps.InfoWindow();
+    return GoogleMapper.map;
 };
 /**
  *  マーカーを追加する
- *  （マーカーをクリックするとGoogleMapper.getInfo()の内容を吹き出しに表示する）
+ *  マーカーをクリックするとGoogleMapper.getMarkerInfo()の内容を吹き出しに表示する
- *  @param  Number  lat     緯度
+ *  @param  Number or LatLng        lat     緯度 or LatLng
- *  @param  Number  lng     経度
+ *  @param  Number                  lng     経度（latにLatLngを渡す場合は不要）
- *  @param  String  title   (Optional) ツールチップ表示する文字列
+ *  @param  String                  title   (Optional) ツールチップ表示する文字列
  *  @param  String or MarkerImage   image   (Optional) マーカー画像のURL or MarkerImage
- *  @return Marker  openInfoWindow()を追加されたMarkerオブジェクト
+ *  @return Marker  追加したマーカー
  *
  *  （参考）Google Maps用のマーカー画像の配布サイト
- *  @see http://code.google.com/p/google-maps-icons/
+ *  @see https://mapicons.mapsmarker.com/
  */
 GoogleMapper.addMarker = function(lat, lng, title, image) {
+    var position = lat;
+    if (lng) {
+        position = new google.maps.LatLng(lat, lng);
+    }
     var marker = new google.maps.Marker({
         map: GoogleMapper.map,
-        position: new google.maps.LatLng(lat, lng),
+        position: position,
         title: (title || ""),
         icon: image
     });
-    marker.openInfoWindow = function() {
+    google.maps.event.addListener(marker, "click", function() {
-        GoogleMapper.openInfoWindow(GoogleMapper.getInfo(marker), null, marker);
+        GoogleMapper.openMarkerWindow(marker);
-    };
+    });
-    google.maps.event.addListener(marker, "click", marker.openInfoWindow);
+    GoogleMapper.markers.push(marker);
     return marker;
@@ ライン 209: / ライン 277: @@
 /**
  *  Google Chart APIを使ってマーカー画像を生成する
- *  @param  Number  lat         緯度
+ *  @param  Number or LatLng    lat         緯度 or LatLng
- *  @param  Number  lng         経度
+ *  @param  Number              lng         経度（latにLatLngを渡す場合は不要）
- *  @param  String  title       (Optional) ツールチップ表示する文字列
+ *  @param  String              title       (Optional) ツールチップ表示する文字列
- *  @param  String  bgColor     (Optional) 背景（塗り潰し）色（例：FFFFFF）
+ *  @param  String              bgColor     (Optional) 背景（塗り潰し）色（例：FFFFFF）
- *  @param  String  textColor   (Optional) 文字色（例：000000）
+ *  @param  String              textColor   (Optional) 文字色（例：000000）
- *  @param  String  str         (Optional) マーカー上に表示する文字
+ *  @param  String              str         (Optional) マーカー上に表示する文字
- *  @return String or MakerImage
+ *  @return String or MarkerImage
- *  @see http://code.google.com/intl/ja/apis/chart/docs/gallery/dynamic_icons.html
+ *  @see https://developers.google.com/chart/image/docs/gallery/dynamic_icons
  */
 GoogleMapper.addColorMarker = function(lat, lng, title, bgColor, textColor, str) {
     var type = "d_map_pin_letter_withshadow";
     var url = GoogleMapper._getIconURL(type, null, str, (bgColor || "F30"), textColor);
     var image = new google.maps.MarkerImage(
         url,
@@ ライン 235: / ライン 304: @@
 /**
  *  Google Chart APIを使って吹き出し画像を生成する
- *  @param  Number  lat         緯度
+ *  @param  Number or LatLng    lat         緯度 or LatLng
- *  @param  Number  lng         経度
+ *  @param  Number              lng         経度（latにLatLngを渡す場合は不要）
- *  @param  String  str         吹き出しに表示する文字列
+ *  @param  String              str         吹き出しに表示する文字列
- *  @param  String  bgColor     (Optional) 背景（塗り潰し）色（例：FFFFFF）
+ *  @param  String              bgColor     (Optional) 背景（塗り潰し）色（例：FFFFFF）
- *  @param  String  textColor   (Optional) 文字色（例：000000）
+ *  @param  String              textColor   (Optional) 文字色（例：000000）
- *  @param  String  style       (Optional) 吹き出し形状（尻尾無しは"bbT"）
+ *  @param  String              style       (Optional) 吹き出し形状（尻尾無しは"bbT"）
- *  @return String or MakerImage
+ *  @return String or MarkerImage
- *  @see http://code.google.com/intl/ja/apis/chart/docs/gallery/dynamic_icons.html
+ *  @see https://developers.google.com/chart/image/docs/gallery/dynamic_icons
  */
 GoogleMapper.addBubbleMarker = function(lat, lng, str, bgColor, textColor, style) {
     var type = "d_bubble_text_small";
-    var style = style || "bb";
+    style = style || "bb";
     var icon = GoogleMapper._getIconURL(type, style, str, (bgColor || "FF0"), textColor);
     var iconY = -1, shadowY = -1;
     switch (style) {
         case "bb":      //左下に着地点
-            iconY = 42;
+            iconY = 35;
-            shadowY = 45;
+            shadowY = 37;
             break;
         case "bbtl":    //左上に着地点
@@ ライン 282: / ライン 352: @@
  */
 GoogleMapper._getIconURL = function(iconType, style, str, bgColor, textColor) {
-    var url = "";
-    if (location.protocol == "http:") {
-        url = "http://chart.apis";
-    } else {
-        url = "https://www";
-    }
-    url += ".google.com/chart?chst=" + iconType + "&chld=";
     var params = [style, encodeURIComponent(str || ""), bgColor, (textColor || "")];
@@ ライン 298: / ライン 358: @@
     }
-    return url + params.join("|");
+    return "//chart.googleapis.com/chart?chst=" + iconType + "&chld=" + params.join("|");
 };
 /**
- *  吹き出しに表示する内容を作る
+ *  マーカーのIndexを取得する
+ *  @param  Marker  marker  Indexを調べたいマーカー
+ *  @return Number  マーカーのIndex
+ */
+GoogleMapper.getMarkerIndex = function(marker) {
+    var markers = GoogleMapper.markers;
+    for (var i = 0, len = markers.length; i < len; i++) {
+        if (markers[i] == marker) {
+            return i;
+        }
+    }
+};
+/**
+ *  マーカーを削除する
+ *  @param  Number  index   削除するマーカーのIndex
+ */
+GoogleMapper.removeMarker = function(index) {
+    GoogleMapper.markers[index].setMap(null);
+    GoogleMapper.markers.splice(index, 1);
+};
+/**
+ *  マーカーを全て削除する
+ */
+GoogleMapper.removeAllMarkers = function() {
+    for (var i = 0, len = GoogleMapper.markers.length; i < len; i++) {
+        GoogleMapper.markers[i].setMap(null);
+    }
+    GoogleMapper.markers = [];
+};
+/**
+ *  マーカー上に吹き出しを表示する
+ *  表示する内容はGoogleMapper.getMarkerInfo()から取得する
  *  @param  Marker  marker  吹き出しを表示するマーカー
  */
-GoogleMapper.getInfo = function(marker) {
+GoogleMapper.openMarkerWindow = function(marker) {
-    return marker.title;
+    GoogleMapper.openInfoWindow(GoogleMapper.getMarkerInfo(marker), null, marker);
+};
+/**
+ *  吹き出しに表示する内容を作る（HTML可）
+ *  表示したい内容がある場合、このfunctionを上書きする
+ *  @param  Marker  marker  吹き出しを表示するマーカー
+ */
+GoogleMapper.getMarkerInfo = function(marker) {
+    return GoogleMapper.escape(marker.title);
+};
+/**
+ *  文字列のHTMLエスケープ
+ *  @param  String  str
+ *  @return String
+ */
+GoogleMapper.escape = function(str) {
+    var rep = { "&": "&amp;", '"': "&quot;", "'": "&#039;", "<": "&lt;", ">": "&gt;" };
+    return str.replace(/[&"'<>]/g, function(m) { return rep[m]; });
 };
 /**
@@ ライン 318: / ライン 429: @@
     }
-    GoogleMapper.closeInfoWindow();
+    var infoWindow = GoogleMapper.infoWindow;
-    GoogleMapper.map.getStreetView().setVisible(false);
+    infoWindow.setAnchor(null); //非公式APIでいったんクリア
+    infoWindow.setOptions({ content: content, position: latLng });
-    var infoWindow = new google.maps.InfoWindow({ content: content, position: latLng });
     infoWindow.open(GoogleMapper.map, marker);
-    GoogleMapper.lastInfoWindow = infoWindow;
 };
 /**
@@ ライン 329: / ライン 438: @@
  */
 GoogleMapper.closeInfoWindow = function() {
-    if (GoogleMapper.lastInfoWindow) {
+    GoogleMapper.infoWindow.close();
-        GoogleMapper.lastInfoWindow.close();
-    }
 };
 /**
@@ ライン 353: / ライン 460: @@
 };
 /**
- *  地名や施設名等で検索する（ジオコーディング）
+ *  端末の現在位置を取得する
- *  @param  String      keywords    検索したいキーワード
+ *  @param  Function    onSuccess   位置取得時に実行するCallback関数
- *  @param  Function    callback    検索結果が渡されるCallback関数
+ *  @param  Function    onError     (Optional) 位置取得失敗時に実行するCallback関数
+ *  @return Boolean     位置情報を取得可能かどうか
+ *  @see http://dev.w3.org/geo/api/spec-source.html#api_description
  */
-GoogleMapper.search = function(keywords, callback) {
+GoogleMapper.getCurrentPosition = function(onSuccess, onError) {
-    if (keywords) {
+    if (!navigator.geolocation) {
-        (new google.maps.Geocoder()).geocode(
+        return false;
-            { address: keywords },
-            GoogleMapper.searchCallback
-        );
     }
+    navigator.geolocation.getCurrentPosition(
+        function(position) {
+            var coords = position.coords;
+            onSuccess(new google.maps.LatLng(coords.latitude, coords.longitude), coords);
+        },
+        onError || function(e) { alert(e.message); },
+        { enableHighAccuracy: true, timeout: 10000 }
+    );
+    return true;
 };
 /**
- *  地名や施設名等で検索する（ジオコーディング）のコールバック関数
+ *  検索ボックスに入力補完機能を付ける（要Placesライブラリ）
- *  1件の場合は地図上でその場所に移動、2件以上の場合は内容をalert()で表示
+ *  @param  String  inputId 検索ボックスのid
- *  @param  Array           response    GeocoderResponseの配列
- *  @param  GeocoderStatus  status
- *  @see http://code.google.com/intl/ja/apis/maps/documentation/v3/reference.html#Geocoder
  */
-GoogleMapper.searchCallback = function(response, status) {
+GoogleMapper.setAutocomplete = function(inputId) {
-    if (!GoogleMapper.checkResponseStatus(status)) {
+    var ac = new google.maps.places.Autocomplete(document.getElementById(inputId));
+    ac.bindTo("bounds", GoogleMapper.map);
+};
+/**
+ *  地名や施設名等で検索する（ジオコーディング）
+ *  @param  String      keywords    検索したいキーワード
+ *  @param  Function    callback    (Optional) 検索結果が渡されるCallback関数
+ *                                  渡されるのはGeocoderResponseの配列とGeocoderStatus
+ *  @see https://developers.google.com/maps/documentation/javascript/reference#Geocoder
+ */
+GoogleMapper.search = function(keywords, callback) {
+    if (!keywords) {
         return;
     }
-    var len = response.length;
-    if (len == 1) {
+    callback = callback || function(response, status) {
-        GoogleMapper.map.panTo(GoogleMapper.getGeocodeLatLng(response[0]));
+        if (!GoogleMapper.checkResponseStatus(status)) {
-        return;
+            return;
-    }
-    var msg = len + "件ヒットしました\n";
-    if (len <= GoogleMapper.maxCount) {
-        for (var i = 0; i < len; i++) {
-            msg += "・" + GoogleMapper.getGeocodeAddress(response[i]) + "\n";
         }
-    }
-    alert(msg + "詳細な地名を追加してください");
+        var len = response.length;
+        var msg = len + "件ヒットしました\n";
+        if (len == 1) {
+            var map = GoogleMapper.map;
+            var result = response[0];
+            var latLng = GoogleMapper.getGeocodeLatLng(result);
+            map.panTo(latLng);
+            if (map.getZoom() < 14) {
+                map.setZoom(14);
+            }
+            GoogleMapper.openInfoWindow(GoogleMapper.getGeocodeAddress(result), latLng);
+            return;
+        } else if (len < 20) {
+            for (var i = 0; i < len; i++) {
+                msg += "・" + GoogleMapper.getGeocodeAddress(response[i]) + "\n";
+            }
+        }
+        alert(msg + "詳細な地名を追加してください");
+    };
+    (new google.maps.Geocoder()).geocode({ address: keywords }, callback);
 };
 /**
@@ ライン 393: / ライン 537: @@
  *  @param  LatLng      latLng      緯度経度
  *  @param  Function    callback    検索結果が渡されるCallback関数
+ *                                  渡されるのはGeocoderResponseの配列とGeocoderStatus
+ *  @see https://developers.google.com/maps/documentation/javascript/reference#Geocoder
  */
 GoogleMapper.searchByLatLng = function(latLng, callback) {
     (new google.maps.Geocoder()).geocode({ latLng: latLng }, callback);
+};
+/**
+ *  GeocoderStatusおよびPlacesServiceStatusをチェックする
+ *  該当データなし以外のエラーの場合は、alert()を表示する
+ *  @param  String  status
+ *  @return Boolean true: OK, false: OK以外
+ */
+GoogleMapper.checkResponseStatus = function(status) {
+    switch (status) {
+        case "OK":
+            return true;
+        case "ZERO_RESULTS":
+            alert("該当データがありませんでした");
+            break;
+        default:
+            alert("エラーが発生しました (" + status + ")");
+    }
+    return false;
+};
+/**
+ *  GeocoderResponseから主な地名を取り出す
+ *  @param  GeocoderResponse    geocodeResult
+ *  @return String  地名
+ */
+GoogleMapper.getGeocodeAddress = function(geocodeResult) {
+    var address = "";
+    var components = geocodeResult.address_components;
+    for (var i = components.length - 2; i >= 0; i--) {  //国名は省略
+        var name = components[i].long_name;
+        if (!name.match(/^(日本|[0-9]{3}-[0-9]{4})$/)) {    //郵便番号も無視
+            address += " " + name;
+        }
+    }
+    return address.substring(1);
+};
+/**
+ *  GeocoderResponseから緯度経度を取り出す
+ *  @param  GeocoderResponse    geocodeResult
+ *  @return LatLng
+ */
+GoogleMapper.getGeocodeLatLng = function(geocodeResult) {
+    return geocodeResult.geometry.location;
 };
 /**
  *  ある地点からある地点までの道順を表示する
  *  1度目に出発地点、2度目に目的地のlatLngを渡す
- *  @param  String / LatLng point   地名 or LatLngオブジェクト
+ *  @param  String / LatLng point   地名 or 緯度経度
  *  @param  String          mode    (Optional) 移動手段（省略すると車）
- *                                             DirectionsTravelModeの定数のどれか
+ *                                             TravelModeの定数のどれか
  *  @param  String          panelId (Optional) 道順の説明を表示するdiv等のid
  */
@@ ライン 431: / ライン 623: @@
         origin: router.from,
         destination: point,
-        travelMode: (mode || router.mode || google.maps.DirectionsTravelMode.DRIVING),
+        travelMode: (mode || router.mode || google.maps.TravelMode.DRIVING),
         provideRouteAlternatives: true,
-        unitSystem: google.maps.DirectionsUnitSystem.METRIC
+        unitSystem: google.maps.UnitSystem.METRIC
     };
-    var callback = function(response, status) {
+    (new google.maps.DirectionsService()).route(request, function(response, status) {
         if (panel) {
             panel.innerHTML = "";
@@ ライン 444: / ライン 636: @@
             renderer.setDirections(response);
         }
-    };
+    });
-    (new google.maps.DirectionsService()).route(request, callback);
 };
 /**
- *  GeocoderStatusの内容をチェックする
+ *  ストリートビューを地図とは別に表示できるようにする
- *  エラーの場合はalert()を表示する
+ *  @param  String  panelId ストリートビューを表示する場所（div等）のid属性
- *  @param  GeocoderStatus  status
- *  @return Boolean true: OK, false: OK以外
  */
-GoogleMapper.checkResponseStatus = function(status) {
+GoogleMapper.setStreetView = function(panelId) {
-    switch (status) {
+    GoogleMapper.map.setStreetView(new google.maps.StreetViewPanorama(
-        case "OK":
+        document.getElementById(panelId),
-            return true;
+        { enableCloseButton: true, visible: false }
-        case "ZERO_RESULTS":
+    ));
-            alert("該当する地域がありませんでした");
-            break;
-        default:
-            alert("エラーが発生しました (" + status + ")");
-    }
-    return false;
 };
 /**
- *  GeocoderResponseから主な地名を取り出す
+ *  Google Placesに登録されているスポットを表示する（要Placesライブラリ）
- *  @param  GeocoderResponse    geocodeResult
+ *  @param  Number  iconSize    (Optional) アイコンの表示サイズ
- *  @return String  地名
+ *  @see https://developers.google.com/maps/documentation/javascript/places
  */
-GoogleMapper.getGeocodeAddress = function(geocodeResult) {
+GoogleMapper.showPlaces = function(iconSize) {
-    var address = "";
+    (new google.maps.places.PlacesService(GoogleMapper.map)).search(
-    var components = geocodeResult.address_components;
+        { bounds: GoogleMapper.map.getBounds() },   //取得対象範囲は表示中の地図
-    for (var i = components.length - 2; i >= 0; i--) {  //国名は省略
+        function(results, status) {
-        var name = components[i].long_name;
+            if (!GoogleMapper.checkResponseStatus(status)) {
-        if (!name.match(/^(日本|[0-9]{3}-[0-9]{4})$/)) {    //郵便番号も無視
+                return;
-            address += " " + name;
+            }
+            GoogleMapper._places = GoogleMapper._places || {};
+            iconSize = (iconSize || 24);
+            var size = new google.maps.Size(iconSize, iconSize);
+            for (var i = 0; i < results.length; i++) {
+                var place = results[i];
+                if (!GoogleMapper._places[place.id]) {
+                    GoogleMapper.addPlace(place, size);
+                    GoogleMapper._places[place.id] = true;
+                }
+            }
         }
-    }
+    );
-    return address.substring(1);
 };
 /**
- *  GeocoderResponseからLatLngオブジェクトを作る
+ *  Google Placesのスポットをマーカーとして表示する
- *  @param  GeocoderResponse    geocodeResult
+ *  @param  PlaceResult place   スポット情報
- *  @return LatLng
+ *  @param  Size        size    アイコンサイズ
  */
-GoogleMapper.getGeocodeLatLng = function(geocodeResult) {
+GoogleMapper.addPlace = function(place, size) {
-    var location = geocodeResult.geometry.location;
+    var marker = new google.maps.Marker({
-    return new google.maps.LatLng(location.lat(), location.lng());
+        map: GoogleMapper.map,
+        position: place.geometry.location,
+        title: place.name,
+        icon: new google.maps.MarkerImage(place.icon, null, null, null, size)
+    });
+    //クリックされたら詳細ページへのリンクを表示する
+    google.maps.event.addListener(marker, "click", function() {
+        GoogleMapper.log(place.types.join());
+        (new google.maps.places.PlacesService(GoogleMapper.map)).getDetails(
+            { reference: place.reference },
+            function(detail, status) {
+                if (!GoogleMapper.checkResponseStatus(status)) {
+                    return;
+                }
+                var h = GoogleMapper.escape;
+                var url = h(detail.url.replace('com', 'co.jp'));    //日本語ページにする
+                GoogleMapper.openInfoWindow(
+                    '<a href="' + url + '" target="_blank">' + h(detail.name) + "</a>",
+                    null,
+                    marker
+                );
+            }
+        );
+    });
 };
 /**
- *  地図上に広告（Google AdSense）を表示する
+ *  地図上に広告（Google AdSense）を表示する（要AdSenseライブラリ）
- *  @param  String          pubId       表示するAdSenseユニットのID
+ *  @param  String          pubId       AdSenseアカウントのサイト運営者ID
  *  @param  AdFormat        format      (Optional) AdSenseの形状
  *  @param  ControlPosition position    (Optional) 地図上のどこに表示するか
  *  @param  String          channel     (Optional) AdSenseのチャネル番号
- *  @see http://code.google.com/intl/ja/apis/maps/documentation/javascript/advertising.html
+ *  @see https://developers.google.com/maps/documentation/javascript/advertising
  */
 GoogleMapper.showAds = function(pubId, format, position, channel) {
@@ ライン 510: / ライン 730: @@
 /**
  *  メインの地図に重ねて、右下に沖縄のミニ地図を表示
- *  @param  Array   markers (Optional) メイン地図に表示したMarkerの配列
+ *  @param  Array   markers (Optional) 沖縄のミニ地図に表示するMarkerの配列
  */
 GoogleMapper.showOkinawa = function(markers) {
     var map = GoogleMapper.map;
     google.maps.event.addListener(map, "tilesloaded", function() {
         google.maps.event.clearListeners(map, "tilesloaded");
@@ ライン 521: / ライン 742: @@
         outer.style.position = "absolute";
         outer.style.right = 0;
-        outer.style.bottom = "1.2em";
+        outer.style.bottom = "120px";   //Overview Map Controlの分だけ空ける
         outer.style.overflow = "hidden";
-        outer.style.width = "150px";
+        outer.style.width = "113px";
         outer.style.height = outer.style.width;
-        outer.style.border = "solid 0 #ccc";
+        outer.style.border = "solid 0 #eee";
-        outer.style.borderWidth = "3px 0 3px 3px";
+        outer.style.borderWidth = "6px 0 6px 6px";
         //実際に地図が載るところ
         var inner = outer.appendChild(document.createElement("div"));
-        inner.style.height = "250px";
+        inner.style.height = "160px";
-        inner.style.top = "-50px";
+        inner.style.top = "-23px";
         var okinawa = new google.maps.Map(inner, {
             center: new google.maps.LatLng(26.5, 127.9),    //沖縄本島の中心あたり
@@ ライン 548: / ライン 768: @@
         closeBtn.innerHTML = "×";
         closeBtn.style.position = "absolute";
-        closeBtn.style.top = 0;
+        closeBtn.style.top = "-5px";
         closeBtn.style.right = 0;
         closeBtn.style.padding = "0 3px";
-        closeBtn.style.backgroundColor = "#ddd";
+        closeBtn.style.backgroundColor = "#eee";
         closeBtn.style.cursor = "pointer";
         closeBtn.onclick = function() { outer.style.display = "none"; };
@@ ライン 565: / ライン 785: @@
             return;
         }
-        var addMarker = function (origin) {
+        var duplicateMarker = function(origin) {
             var marker = new google.maps.Marker({
                 position: origin.position,
@@ ライン 573: / ライン 793: @@
             });
             marker.setMap(okinawa);
-            google.maps.event.addListener(marker, "click", origin.openInfoWindow);
+            google.maps.event.addListener(marker, "click", function() {
+                GoogleMapper.openMarkerWindow(origin);
+            });
         };
         for (var i = 0, len = markers.length; i < len; i++) {
-            addMarker(markers[i]);
+            duplicateMarker(markers[i]);
         }
     });
+};
+/**
+ *  consoleがある場合のみ、コンソールに出力する
+ *  @param  Object  value
+ */
+GoogleMapper.log = function(value) {
+    if (window.console && console.log) {
+        console.log(value);
+    }
 };
 /******************************************************************************
@@ ライン 584: / ライン 815: @@
  *  GoogleMapeer.demo("gmap", "route", "keywords");
  *  @param  String  mapId           地図を表示する場所（div等）のid属性
- *  @param  String  routerPanelId    (Optional) 道順を表示する場所（div等）のid属性
+ *  @param  String  streetViewId    (Optional) ストリートビューを表示するdiv等のid属性
- *  @param  String  keywordInputId   (Optional) 検索用テキストボックスのid属性
+ *  @param  String  routerPanelId   (Optional) 道順を表示する場所（div等）のid属性
+ *  @param  String  keywordInputId  (Optional) 検索用テキストボックスのid属性
  ******************************************************************************/
-GoogleMapper.demo = function(mapId, routerPanelId, keywordInputId) {
+GoogleMapper.demo = function(mapId, streetViewId, routerPanelId, keywordInputId) {
+    var demo = GoogleMapper.demo;
     //地図を表示（緯度経度ズームを渡さないと日本列島を表示する）
-    GoogleMapper.show(mapId);
+    var map = GoogleMapper.show(mapId);
     //マーカーを表示
-    var iconUrl = "http://google-maps-icons.googlecode.com/files/moderntower.png";
+    var tokyo = GoogleMapper.addMarker(35.7, 139.7, "東京");
-    GoogleMapper.addMarker(35.7, 139.7, "東京", iconUrl).openInfoWindow();  //最初から開く
+    //マーカー上に吹き出しを表示
-    //マーカーの色を変える
+    GoogleMapper.openMarkerWindow(tokyo);
+    //色の違うマーカーを表示
     GoogleMapper.addColorMarker(34.7, 135.5, "大阪", "FF0", "000", "虎");
-    //マーカーを吹き出し型にする
+    //吹き出し型のマーカーを表示
-    var naha = GoogleMapper.addBubbleMarker(26.2, 127.7, "那覇");
+    var naha = GoogleMapper.addBubbleMarker(26.2, 127.7, "<那覇>");
     //沖縄のミニ地図を表示
     GoogleMapper.showOkinawa([naha]);
+    //ストリートビューを地図とは別に表示できるようにする
+    GoogleMapper.setStreetView(streetViewId);
     //地図上をクリック可能にする
@@ ライン 615: / ライン 853: @@
         //二つの地点間の車または徒歩の道順を表示
-        if (GoogleMapper.demo.startFlg) { //スタート地点指定済みの場合
+        if (demo.startFlg) {    //スタート地点指定済みの場合
-            GoogleMapper.demo.startFlg = false;
+            demo.startFlg = false;
             GoogleMapper.direct(latLng);
             return "";  //この場合は吹き出し表示なし
         }
-        GoogleMapper.demo.startFlg = false;
+        demo.startFlg = false;
-        GoogleMapper.demo.startRouting = function(mode) {
+        demo.startRouting = function(mode) {
             GoogleMapper.mapClickable = false;
-            GoogleMapper.demo.startFlg = true;
+            demo.startFlg = true;
             GoogleMapper.direct(latLng, mode, routerPanelId);
             GoogleMapper.closeInfoWindow();
         };
         h += "<br /><br />ここから次にクリックする場所までの道順を表示できます<br />";
         var modes = {
             DRIVING: "車",
@@ ライン 638: / ライン 874: @@
             h += '<input type="button" value="' + modes[mode] + 'の場合"';
             h += ' onclick="GoogleMapper.demo.startRouting(';
-            h += 'google.maps.DirectionsTravelMode.' + mode + ')" /> ';
+            h += 'google.maps.TravelMode.' + mode + ')" /> ';
         }
@@ ライン 645: / ライン 881: @@
     //道順の終点はマーカーでもOKにする
-    GoogleMapper.getInfo = function(marker) {
+    var getMarkerInfo = GoogleMapper.getMarkerInfo; //オリジナルを退避
-        if (GoogleMapper.demo.startFlg) {   //スタート地点指定済みの場合
+    GoogleMapper.getMarkerInfo = function(marker) {
-            GoogleMapper.demo.startFlg = false;
+        if (demo.startFlg) {    //スタート地点指定済みの場合
+            demo.startFlg = false;
             GoogleMapper.direct(marker.position);
             return "";
         }
-        return marker.title;
+        return getMarkerInfo(marker);
     };
+    //検索キーワードの入力補完（要placesライブラリ）
+    if (google.maps.places) {
+        GoogleMapper.setAutocomplete(keywordInputId);
+    }
     //地名や施設名等で検索する（ジオコーディング）
-    GoogleMapper.demo.search = function() {
+    var searchBox = document.getElementById(keywordInputId);
-        var searchBox = document.getElementById(keywordInputId);
+    demo.search = function() {
         GoogleMapper.search(searchBox.value);
         searchBox.focus();
     };
-    //Firebugがあれば、中心点とズーム値をコンソールに表示
+    //consoleがあれば、中心点とズーム値をコンソールに表示
-    if (!window.console || !window.console.log) {
+    google.maps.event.addListener(map, "idle", function() {
-        return;
-    }
-    var map = GoogleMapper.map;
-    var log = function() {
         var center = map.getCenter();
         var latlng = "lat:" + center.lat() + ", lng:" + center.lng();
-        console.log(latlng + ", zoom:" + map.getZoom());
+        GoogleMapper.log(latlng + ", zoom:" + map.getZoom());
-    };
+    });
-    google.maps.event.addListener(map, "idle", log);
 };
 </code>

ゼロと無限の間に

ユーザ用ツール

サイト用ツール

差分

ページ用ツール