[19] Google Maps は、 Google の地図サービスです。

[20] 単独のWebサービスとして提供されている他、 Web API を通じて多くの Webサイトに埋め込まれて地図等の機能を提供しています。

API を使う

地図の表示範囲を指定したい

[6] Map オブジェクトの panTo メソッドで指定できます。

線の一部区間だけ色を変えたい

[3] Polyline を区間ごとに分割してそれぞれの色を指定すれば良い。

線に縁取りしたい

[4] 太い Polyline の上に細い Polyline を重ねるしかない?

線に沿って文字を描きたい

[7] 難しそう。

Poyline に tooltip を指定したい

[8] 無理そう。

[13] mouseover で地図を含む要素に title 属性を設定して、 mouseout で元に戻せばできるかも?

マーカーをドラッグしたとき、ドロップ先をいくつかの座標候補に限定させたい

[5] API にそういう機能は無さそう。 drag イベントでドラッグ位置の直近の座標を自分で計算して Marker 位置を設定すれば良い。

右クリックでメニューを表示したい

[9] 右クリックされたことは rightclick イベントで取得できます。

[11] 地図上のクリックも標準状態では地図の外側の DOM 要素のイベントとして伝播しますが、 Google Maps の click や rightclick のイベントにコールバック関数を登録していると、 地図外には伝播しなくなる (場合もある) ようです。

[10] コールバック関数の引数の MouseEvent オブジェクトは、 ドキュメントによると latLng プロパティーしかありませんが、 実際には (Map オブジェクトの場合) pixel プロパティーがあって、そこから x と y の座標が取得できます。 (ドキュメントにないのですが、世間ではまま使われているようです。) Map 以外のオブジェクトでの右クリックだと pixel は利用できないことがあります。

[12] より安全・確実に地図画面上の座標を取得したいときは、少し面倒ですが、 OverlayView から getProjection で取得できるオブジェクトを使うと良いようです。 (Map の getProjection は少し違っていて、同じことはできないようです。)

  var Overlay = function () { };
  Overlay.prototype = new google.maps.OverlayView();
  Overlay.prototype.onAdd = function () {
  };
  Overlay.prototype.draw = function () {
  };
  Overlay.prototype.onRemove = function () {
  };

  var overlay = new Overlay;
  overlay.setMap (map);

  object.addListener ('rightclick', function (ev) {
    var xy = map.getProjection ().fromLatLngToContainerPixel (ev.latLng);
    console.log (xy.x, xy.y);
  });

線の近く数ピクセルのクリックでも線をクリックしたことにしたい

[14] 無理そう。 Map の click で自力でがんばればできる。

座標により細かくマウスカーソルを制御したい

[15] 無理そう。 Map の mousemove で自力でがんばればできる。

標準で表示される地物の表示にマウスイベントを奪われる

[16] 建物や山頂などの表示 (アイコンやラベル) があると、そちらにクリックなどのマウスイベントが奪われてしまいます。

[17] OverlayView を使えば、 floatPane でそれよりも上面にレンダリングはできますが、なぜかマウスイベントとカーソル表示は奪われてしまいます。 (なお、 floatPane の説明に情報窓よりも上と書いてありますが、嘘っぽく、それよりは下になります。)

[18] これを避けるには非表示にするしかなさそうです。

 new google.maps.Map (element, {
    styles: [
      {featureType: "poi", elementType: "all", stylers: [{visibility: "off"}]},
      {featureType: "landscape", elementType: "all", stylers: [{visibility: "off"}]},
    ],
  });

地図内にポップアップを表示したい

[24] 情報ウィンドウ (google.maps.InfoWindow) でできます。

縮尺を表示したい

[27] map.setOptions ({scaleControl: true}) で表示されます。

[32] 「○km」と表示される部分をクリックすると「○マイル」 のように切り替わります。 API から切り替えたり、現在の状態を取得したりする方法は見当たりません。

[33] API には google.maps.UnitSystem.METRIC (メートル法、メートルやキロメートル), google.maps.UnitSystem.IMPERIAL (ヤードポンド法、フィートやマイル) というのがありますが、 地図表示には使われません。

現在位置ボタンを表示したい

[31] Google Maps 本体にある現在位置を取得して中央に表示するボタンは、 API で表示させることはできないようです。

Google Mapsの不適切表示問題

[36] 地図表示の政治問題

[41] >>40 一度解決したはずなのに再発してたらしい。

料金改定

令和7年

[44] からまた改定。

[45] 例によってわかりにくい書き方がされているが、よく使っているところにとっては実質値上げらしい。

[42] Blog: Build more for free and access more discounts online with Google Maps Platform updates – Google Maps Platform, , https://mapsplatform.google.com/resources/blog/build-more-for-free-and-access-more-discounts-online-with-google-maps-platform-updates/

[43] Platform Pricing & API Costs - Google Maps Platform, , https://mapsplatform.google.com/pricing-calculator/?_gl=1*12klq45*_up*MQ..*_ga*MjA2OTcxNDg4LjE3Mzk0MTk1ODg.*_ga_NRWSTWS78N*MTczOTQxOTU4OC4xLjAuMTczOTQxOTU4OC4wLjAuMA..

技術

[47] Googleによる地名翻訳

関連

[21] Google Earth とは別製品となっているようです。

メモ

[2] Google Maps JavaScript API V3 Reference  |  Google Maps JavaScript API  |  Google Developers ( 版) https://developers.google.com/maps/documentation/javascript/reference

[1] Google Japan Blog: Google マップの不動産検索について ( 版) http://googlejapan.blogspot.jp/2011/01/google_27.html

2009 年 7 月に米国で、2010 年 8 月に日本でも開始した Google マップの不動産検索機能は、「多くの物件情報を一度に地図上に表示する」というコンセプトを非常に高く評価していただきました。しかしながら、実際のサービスの利用増加にはなかなか繋がらず、様々な側面から検討した結果、断腸の思いではありますが、本年 2 月 11 日をもって、サービスを停止することになりました。サービスの停止は、日本を始め、今日同サービスを提供しているすべての地域(米国、オーストラリア、ニュージーランド、英国)が対象となります。

Google Maps

[22] Too Many Markers!  |  Google Maps APIs  |  Google Developers ( ()) https://developers.google.com/maps/articles/toomanymarkers

[23] googlemaps/js-marker-clusterer: A marker clustering library for the Google Maps JavaScript API v3. ( ()) https://github.com/googlemaps/js-marker-clusterer

[25] Share your trips and real-time location from Google Maps ( ()) https://blog.google/products/maps/share-your-trips-and-real-time-location-google-maps/

[26] Google Maps Platform: Introducing Google Maps Platform () https://mapsplatform.googleblog.com/2018/05/introducing-google-maps-platform.html?utm_source=em-anncmt&utm_medium=em&utm_campaign=fy18-q2-global-adhoc-email-cs-maps_none_maps_spicestandardplannobilling&utm_content=global%7Cen%7Chybr%7C%7C%7C%7C%7C%7C

[28] Developer Guide  |  Maps Embed API  |  Google Developers () https://developers.google.com/maps/documentation/embed/guide

[29] Googleマップがゼンリンとの契約解除で、「バス停が消えた」「うちがなくなった」「存在しない道がある」など数々の改変が露見する - Togetter () https://togetter.com/li/1330522

[30] 「Googleマップが劣化した」不満の声が相次ぐ ゼンリンとの契約解除で日本地図データを自社製に変更か - ITmedia NEWS () https://www.itmedia.co.jp/news/articles/1903/22/news067.html

[37] ビッグモーター全店舗、グーグルマップより消ゆ | スラド IT, https://it.srad.jp/story/23/08/01/1242207/

これにより、枯れた街路樹の確認が困難になっており、SNS上でもこの問題について困惑の声が広がっているようだ。

[38] >>37 事の真相はともかく、 Google Maps に地物情報が出てこないごときのことで 「確認が困難」になるのは見る人の問題だろう...

[39] その程度の事実確認もできない素人は何もしないで黙っていたほうがすべての人にとっていいのでは...

[46] Xユーザーの西村まさゆきさん: 「Googleマップって便利すぎる上に無料だから、なんか国土地理院の地図みたいな感じで使ってるけど、ぜんぜんそんなことなくて、大阪駅より金を払ってるSMショーパブの方をデカく表示するとか、普通にするのみて「そういえば営利企業のサービスだった」って気づく」 / X, , https://x.com/tokyo26/status/1904776098363433168