てぃーだブログ › iiiso の海。時々、セントレア。宵のうち、システム開発。 › 【JavaScript / Google Map】 › 【JavaScript / Google Map】POI やマーカー、線、円の上で座標を取得するには？

2016年06月19日

【JavaScript / Google Map】POI やマーカー、線、円の上で座標を取得するには？

Google マップはスケールボタン「＋」をクリックして地図を拡大すると、POI （Point of Interest） と呼ばれる施設名のリンクとそのポイントを示すマーカーがあちこちに表示されます。
このリンクをクリックすると、一般的に「情報ウィンドウ」と呼ばれるポップアップが開いて、さらに詳しい情報へのリンクや画像が表示されます。
[ Point of interest from wikipedia ]


以下は、本家 Google Map で「名古屋城」と書かれた部分をクリックしたときの図


【JavaScript / Google Map】POI やマーカー、線、円の上で座標を取得するには？


以下は、「Google Maps JavaScript API v3 」を使った地図アプリケーション上で「名古屋城」をクリックしたときの図

【JavaScript / Google Map】POI やマーカー、線、円の上で座標を取得するには？


地図を眺めて情報を調べたいときには、これはこれでありがたいけど、「Google マップを使って 2点間の距離を測るアプリケーションを提供する」なんてときには、いろいろと面倒なことが待っています。

・・・ココからは、この記事の本題になりますので、まずはサンプルを作ってみました。


■サンプル： Google Map で 2点間の距離を測るアプリケーション
地図上で、2地点をクリックしてください。

【計測結果】


■開発メモ：

2点間の距離を測る場合、まずは地図上で始点と終点をクリックして座標を取得し、Googleマップ関数に引数として渡すだけです。
しかし、Google マップはデフォルトで POI やマーカーをマウスオーバーするとカーソルの形がPointer 型になり、リンクとして機能してしまうため、少し 手を加えないと座標が得られません。


【JavaScript / Google Map】POI やマーカー、線、円の上で座標を取得するには？


たとえば、「二の丸街園」から「名古屋城天守閣」までの直線距離を測る場合、
・・・「二の丸街園」の文字やマーカーをクリックすると、情報ウィンドウが開いてしまい座標は得られません。


【JavaScript / Google Map】POI やマーカー、線、円の上で座標を取得するには？


POI やPOI に付属するマーカー上で座標を取得するには、Map クラスの setOptions メソッドを使って clickableIcons プロパティを false にします。

参考サイト
[ MapOptions object specification ]


<body>
<div id="map" style="width:800px; height:400px;"></div>
<script type="text/javascript">
  var myOptions = {
		zoom: 16,
		center: new google.maps.LatLng(35.184057, 136.900262),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scaleControl: true
	}
  var map = new google.maps.Map(document.getElementById('map'), myOptions);
  map.setOptions({clickableIcons: false});  // アイコンに対するクリックを無効にする
</script>
</body>

これで、POI やマーカーの上をクリックしたときでも、座標が得られるようになります。


【JavaScript / Google Map】POI やマーカー、線、円の上で座標を取得するには？


以下は、距離計測時の図。


【JavaScript / Google Map】POI やマーカー、線、円の上で座標を取得するには？


次に、たとえば上図のように地図上に描いた赤い線（図形オブジェクト）自体にマウスオーバーしたときに、カーソルの形がPointer 型になるようであれば、クリックしてもその地点の座標を取得することができません。
（線自身のリンクのようなものをクリックしている状態になっているため）

線上で座標を取得したければ、Polyline クラスの コンストラクタで clickable プロパティを false にします。


<body>
<script type="text/javascript">
  var PolyLine = function(){
    return new google.maps.Polyline({
      strokeColor: '#FF0000',
      strokeCapacity: 1.0,
      strokeWeight: 3,
      clickable: false // 線オブジェクトに対するクリックを無効にする
    });
  };
  objPolyLine = new PolyLine();
  objPolyLine.setMap(map);
</script>
</body>


以上で、線上において座標を取得するためのクリックができるようになります。

次に、たとえばあらかじめ地図上に描いた水色の円の内部にある「The Westin Nagoya Castle（ホテル ウェスティンナゴヤキャッスル）」と「二の丸街園」の間の直線距離を測りたい場合、円の内部をマウスオーバーした際にカーソルの形がPointer 型になっていると、クリックしても座標を取得できません。

【JavaScript / Google Map】POI やマーカー、線、円の上で座標を取得するには？


円の内部で座標を取得するには、Circle クラスの コンストラクタで clickable プロパティを false にすればよいだけですが、別の設定方法としてCircle クラスの setOptions メソッドで clickable プロパティを false にすることでも実現できます。


<body>
<script type="text/javascript">
  var CircleL = function(latLng){
    return new google.maps.Circle({
      center: latLng,
      radius: 200,
      strokeWeight: 3,
      strokeColor: '#00FFFF,
      strokeOpacity: 1.0,
      fillColor: '#00FFFF,
      fillOpacity: 0.3
      //, clickable: false // 円オブジェクトに対するクリックを無効にする（今回は未使用）
    });
  };
  var circleOption = {clickable: false};
  objCircleL = new CircleL(new google.maps.LatLng(35.185970, 136.895681));
  objCircleL.setMap(map);
  objCircleL.setOptions(circleOption); // 円オブジェクトに対するクリックを無効にする
</script>
</body>


以上で、円の内部において座標を取得するためのクリックができるようになります。


【JavaScript / Google Map】POI やマーカー、線、円の上で座標を取得するには？


次に、たとえば自作した「名古屋城天守閣」の画像（マーカー）を地図上に表示し、画像上の場所を始点（または終点）とし、2点間の距離を測る場合、画像をマウスオーバーした際にカーソルの形がPointer 型になっていると、クリックしてもその地点の座標を取得できません。

【JavaScript / Google Map】POI やマーカー、線、円の上で座標を取得するには？


画像アイコン上で座標を取得するには、Marker クラスの コンストラクタで clickable プロパティを false にします。


<body>
<script type="text/javascript">
  var Marker = function(map, latLng){
    return new google.maps.Marker({
      map: map,
      position: latLng,
      icon: {
        url: './nagoya_castle.png',
        scaledSize: new google.maps.Size(29, 27),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(15, -5),
      },
      clickable: false
    });
  }
  var objMarkers = [];
  objMarkers = new Marker(map, new google.maps.LatLng(35.185927, 136.899115));
</script>
</body>
お


以上で、自作した画像上でも座標を取得するためのクリックができるようになります。


【JavaScript / Google Map】POI やマーカー、線、円の上で座標を取得するには？



■参考サイト

[ 名古屋城公式ウェブサイト ]

[ ウェスティンナゴヤキャッスル | 公式サイト ]





Posted by iiiso at 21:45│Comments(0) │【JavaScript / Google Map】
このBlogのトップへ
上の画像に書かれている文字を入力して下さい
 
＜ご注意＞
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。
このページの上へ▲