高機能有料テーマ「Avada」を使ってみる【番外編:MapをJavascript01】

投稿日: カテゴリー: Javascript, Wordpress

プラグインで欲しい感じの地図機能がなかなか見つからないのでJavaScriptを使ってみた。

Google Mapを埋め込む際にはAPIキーが必要となったので以下をheaderのPHPに書き込んだ。
本当は、Wordpressにおいてスクリプトを参照する場合にはルールがあるようだけれども…
とりあえずテスト的に動かしてみたかったので…

1行目はGoogleMapのJavascriptを使います、でキーはこれです…てこと。
2・3行目は参考にして自作したスクリプト。

正直、2行目【map.js】のスクリプトでうまくいくものと作業していたが、クリックしてもマップ上のマーカーにリンクされず、3行目【map_into.js】を用意した。
多分…そんなことをしなくても動くと思うのだが間違いを探しきれなかった。
「どちらかが動けばいいや…」で動いた方を採用しようと思ったが、どちらかを抜くとなぜが思うように表示されない…
ビギナーだな〜と熟々情けなくなる。とりあえず、2つともサーバに残しパスを引いたままその他の作業にいってみる。

2行目でひっぱてきているスクリプト【map.js】はこんな感じ。

3行目でひっぱてきているスクリプト【map_into.js】はこんな感じ。

とりあえず、この2つにパスを引いておいて以下の2つをHTMLに書き込めば下のような地図を作ることが出来る。

 

garagePhonon cafe roomMONET
 

で、最終的に採用した【map.js】のスクリプトは、こちら。
何が違うのか…

アイコンをオリジナルの画像にしてみた。

function create markerの末尾に【image】を追加し、【var marker=】に【icon: image】を追加。個々のポイントの【var marker =】の末尾に【”画像のULR”】を追加した。
これで、マーカーをオリジナル画像に変更できる。

Google Map APIの活用方法は本家サイトに詳しく記載があった。

素晴らしい。