勉強したことのメモ

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

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

      2020/06/19

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

 

HTML部分

 

javascript部分

 

表示位置の移動

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

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

 - jQuery

  関連記事

jQueryでshow/hideよりaddClass/removeClassの方が速い

diaplay:none/blockする際に最近はshow()/hide()を ...

tableのフィルター機能

jQueryのプラグインで簡単にフィルター機能が つけられたのでメモ。 ■必要な ...

画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...

Ajaxで負荷軽減

業務中、専用のページでfile_get_contents的なものは あまり使わな ...

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

FormDataを使ったAjax通信がiPhoneのみエラー

FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...

画像をサムネイル⇔クリックで拡大(lightbox)

画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...

jQuery Nice Selectを特定ページのみ無効にしたい

bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ...

jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...