GoogleMapsAPIを使って緯度・経度からMarkerを作成する方法

公開日: : 最終更新日:2014/05/05 JavaScript , , , ,

GoogleMaps API(v3) を使って、指定した緯度・経度の地点に Marker を表示する方法です。

GoogleMaps の JavaScript API (v3) を使って地図上に複数の Marker を表示するサンプル では、地図をクリックした地点に Marker を表示させましたが、今回はユーザの入力内容から Marker を表示してみます。

icatch-darts_1543970905_mini

photo credit: eschipul via photopin cc

目次

1. 指定した緯度・経度の地点に Marker を表示する

google.maps.Marker オブジェクトは次のようなコードで生成します。

var marker = new google.maps.Marker({map: gmap, position: location});
    // gmap → google.maps.Map オブジェクト
    // location → google.maps.LatLng オブジェクト

このコンストラクタ関数の第2パラメータ position は、Marker を表示する地点を指定するので、ここに「任意の緯度・経度」を指定してやります。
この「任意の緯度・経度」というのは、google.maps.LatLng オブジェクトで表すことができるので、このオブジェクトをコンストラクタ関数に設定します。

google.maps.LatLng オブジェクトの生成ですが、コンストラクタ関数は緯度と経度を受け取るようになっています。
こんな感じのコードで生成できます。

var latlng = new google.maps.LatLng(35.659058, 139.70059300000003); // ハチ公の緯度・経度

これらを踏まえると、こんなコードで指定した緯度・経度の地点に Marker を表示することができるようになります。

var gmap = createGoogleMaps(); // google.maps.Map オブジェクトを生成する関数
var latlng = new google.maps.LatLng(35.659058, 139.70059300000003); // ハチ公の緯度・経度
var marker = new google.maps.Marker({map: gmap, position: latlng});

2. 動作確認

動くサンプルは次の URL で公開しています。
ぜひぜひ試してみてください。

以下は、このサンプルサイトのスクリーンショットです。

スカイツリーに Marker が付いています。

2014-04-08-2-01

画面上部の入力欄に「ハチ公」の緯度・経度 “35.659058:139.70059300000003″ を入力して Marker ボタンをクリックしてみます。

2014-04-08-2-02

すると、ハチ公の Marker が表示されます。

2014-04-08-2-03

と、緯度:経度 の書式で入力していただくと、その地点に Marker が表示されるようになります。

ソースコード

上記サンプルサイトでの、この辺りのソースコードを抜粋しておきます。

ソースコード全体を見たいという方は GitHub に登録してありますので、次から覗いてみてください。

入力内容から google.maps.LatLng オブジェクトを生成する辺りは、こんな感じで実装しています。

// Marker ボタンがクリックされた場合の対応
$('#header-hollow button').click(function(event) {
    var inputString = $('#address').val();
    if(InputStringParser.isLatLng(inputString)) {
        var array = inputString.split(":"); // 入力内容を : で分割して、、、
        showMaker(new google.maps.LatLng(array[0], array[1])); // LatLng オブジェクトを生成 → showMaker 関数の呼び出し
    } else {
        geocoder.geocode({'address': inputString}, callbackRender);
    }
});

showMaker 関数はこんな感じです。

/**
 * 指定の場所に InfoWindow を設定した Marker を表示する。
 * 
 * @param  {Object} map Marker を立てる GoogleMap オブジェクト
 * @param  {Object} location Marker を立てる位置
 */
function showMaker(location) {
    var marker = new google.maps.Marker({map: gmap, position: location});
        // Marker オブジェクトを生成して、地図上に表示する

    var markerInfoWindow = new MarkderInfoWindow(marker, new Location(location), centerLocation);
    google.maps.event.addListener(marker, 'click', function(event) { // Marker がクリックされたら、、、
        stock.hideInfoWindow(); // すべての InfoWindow を非表示にして、、、
        markerInfoWindow.showInfoWindow(); // この Marker の InfoWindow だけ表示する
    });
    stock.add(markerInfoWindow);
}

4. まとめ

以上、GoogleMaps API(v3) を使って、指定した緯度・経度の地点に Marker を表示する方法でした。

緯度・経度から Marker を表示するって、あまり需要がなさそうですけど知っておいて損はないかと思います。

5. その他の GoogleMap に関する記事

その他の GoogleMap に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください!

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-exception_2482521750_mini-thumbnail

Error オブジェクトの種類と独自例外オブジェクトの作成方法

JavaScript で例外オブジェクトを扱ったことがなかったので、簡単な内容ですが例外オブジェクト

記事を読む

icatch-disappear_7186028511_mini-thumbnail

GoogleMapsAPIを使ってMarkerの表示と非表示を切り替える方法

GoogleMaps API(v3) を使って地図上に表示されている Marker を非表示にする方

記事を読む

icatch-pointer_7269926502_mini-thumbnail

GoogleMaps の JavaScript API (v3) を使って地図上に複数の Marker を表示するサンプル

これまで GoogleMaps API を使って Marker やら InfoWindow を表示す

記事を読む

icatch-bootstrap3

TwitterBootstrap3 をベースにした画面に GoogleMap を埋め込む

このところ立て続けに GoogleMap を JavaScript から扱う記事を投稿してます。 意

記事を読む

Head in Hands

JSON をオブジェクトに変換するときに注意したいこと

おそらくですが、これから書く内容は常識なんだと思います。 が、その常識を知らなかったためにかなりの

記事を読む

icatch-class_303144538_mini-thumbnail

JavaScript のクラス定義

最近 JavaScript を使う機会が増えてきて、快適にコードが書けるように環境を少しずつ整えてき

記事を読む

icatch-checkbox-147904_640

jQuery を使ってチェックボックスのチェックを付けたり外したりするコードスニペット

jQuery を使ってチェックボックスの ON/OFF を操作する方法ですが、以前実装したときのコー

記事を読む

icatch-switch_mini

jQuery を使って表示する画像を setInterval を使って切り替える

画面に表示する画像を一定期間で切り替えるスニペットです。 スライドショー的なプラグインで済ますこと

記事を読む

icatch-flag_1395019914_mini-thumbnail

GoogleMaps の JavaScript API(v3) を使って、常に1つの InfoWindow だけ表示されるように制御する

前回アップした GoogleMaps の JavaScript API (v3) を使って地図上に複

記事を読む

icatch-template_mini

Underscore.js の template と each を使って JSON から select タグを生成する

Underscore.js を使って、都道府県名を定義してある JSON から select タグを

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


3 × 五 =

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑