勉強したことのメモ

webプログラマが勉強したことのメモ。

GoogleMapAPIで住所・経度緯度入力後にマーカーを移動させる

      2020/06/19

フォーム内に住所・経度・緯度のテキストボックスを設置し、住所を入力後にボタンを押すと経度緯度が自動で入力された上でGoogleMap上でも該当住所の位置にマーカーを表示させたい。また、経度緯度を入力後にボタンを押すとGoogleMap上でも該当位置にマーカーを設置したい(この場合は住所の自動入力不要)。以下に方法をメモ。

 

HTML部分

 

javascript部分

 

表示位置の移動

古いマーカーを削除して新しいマーカーを設置するのは過去記事を見てなんとかなったけど、新しいマーカーの表示位置に移動するというのに少し詰まった。

調べたところmap.panToという関数で指定の座標へ移動できた。割と使いどころが多そうな関数なので覚えておきたいところ。

 - jQuery

  関連記事

jQueryでimgタグのsrcを変える

やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...

アコーディオンメニュー

簡単にアコーディオンメニューを導入したい時に 便利に使えたプラグイン。 ■サンプ ...

jQueryで関数処理中にブラウザのブロック(intro.js)

Ajaxで処理を行っている間、他の処理を行わせたくなかった。 「now load ...

classの取り扱い

jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...

submit関連のjQuery2

<?php error_reporting(E_ALL & ~E_ ...

プラグインを使用せず、jQueryでオートページャー

プラグインを使わずにオートページャーを 作りたかった。 内容としては、 ・ターゲ ...

ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

スマホ対応のjQueryのカラーピッカープラグイン

以前の記事でカラーピッカープラグインのことを書いたけど、スマホでは使えない。なの ...

jQueryでボタンをクリックしてクリップボードにコピー

■2015/11/01追記 以下記事でライブラリとか無しで同様の機能がつけられる ...

無料でジオコーディング(住所→経度緯度)を行う

GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...