黄昏より暗きもの、血の流れより赤きもの

黄昏より暗きもの、血の流れより赤きもの

自分の好きな事を好きなように書いて行きます。

google maps api v3で、クリックした場所にマーカーを設置する その1:マーカーの設置と削除

google maps apiで何ができるのか?

例えば旅行などのガイドブックでは地図に「○○がありますよ」と表示して、読んでいる人にそこに何があるかを分かりやすく説明している。google maps apiを使う事で、PCや携帯電話上で白地図に色々書き込んで行くような感じで、自分や自分らの地図を作り上げる事ができる。

普通の地図でもどこに何があるのかのマーカーを表示して、その場所を分かりやすく説明している。これと同じ事がgoogle maps apiにも出来る。そこで今日はgoogle maps apiのマーカーを設置する方法と削除する方法について見て行く。

経度/緯度の取得

URL:http://www.geekpage.jp/web/google-maps-api/v3/get-xy.php

地図上でクリックした位置の経度緯度を取得するためには、「経度/緯度の取得(Geekなページ)」のやり方が参考になる。具体的にはaddListerメソッドにて関数setMarker関数を呼び出し、記録していく流れとなる。マーカーを設置するには経度と緯度の情報が必要なので、これを取得していく。setMarkerメソッドはマウスクリック後に実行される関数なので、経度と緯度を取得するためにはevent.latLng.lat()、event.latLng.lng()を使って取得していく。

マーカーを設置

マーカーを設置するためには「(マーカーのオブジェクト).setMap(地図)」というメソッドを使って行く。ここで後述するマーカーを削除をしやすくするために、array_pushメソッドを使って設置したマーカーの情報を配列mk_arrayに格納しておこう。

マーカーを削除

マーカーの削除は、mk_arrayの各要素に対してsetMap(null)を設定してやる事で削除できる。下記ではinputボタンを押すと、removeMarkerメソッドが実行され、設置したマーカーが削除される流れとなる。

サンプル

サンプルはこちら

ソースコード