新着投稿

wordpressでgoogle mapにオリジナルアイコンを入れてみた

2017年7月12日

google mapにオリジナルアイコンが入る?

なんでも試してみたくなります。

BROは大阪 心斎橋 南船場の立地からか、一般の方も多くご利用されています。

南船場とは大阪でもブティック・セレクトショップ・カフェレストラン、

外国車専門店が軒を連ねる有数なところ

 

電車や自転車、自家用車で来られる初めての方もいらっしゃいます。

お電話でも難波とか堀江にいるのだけど、どう行けばいい?と問合せを頂きます。

今、どう向かっているのか、どこにいらっしゃるのかが不明ですが

どい行けばいいのか、わかりやすく説明をしております。

 

そして来られるときに頼りになるのがわかりやすいマップ

最寄り駅は

御堂筋線・長堀鶴見緑地線は心斎橋駅 出口3 徒歩4分

四つ橋線 四ツ橋駅 出口1-A 徒歩2分

 

google Map  のカスタマイズ

このマップはすでにBROホームページに載せました

ビリヤードBRO公式ホームページ

 

 

 

作るきっかけとなったのはBROの近くの店舗のホームページにこのようなマップが

BRO近くの店舗

(※このマップは画像を貼り付けてるので拡大・縮小はできません。)

その店舗のマップをみて、こんなお船のオリジナルアイコンがマップに表示!

しかもアイコンが上からストンと落ちてくる。

こんなことができるんだと感心

google mapっていわば外部のソフト

そこにオリジナルアイコンを差し込む?

 

できるんですね

通常のマップと違って色も変更可能。

オリジナルアイコンも入って拡大・縮小もスムーズ

 

 

このマップを載せているお店はこちら

 

真似て作ってはみたものの

google mapにレイヤー画像を入れる方法

似てはいるけどスマホからだと拡大・縮小が思うようにいかず動きが悪い。

マップカラーも変更はできない。。。なんかちゃうやんw

 

ググってオリジナルアイコンマップの作成方法を探してみると
・htmlにgoogle mapを呼び出すコードを書く
・CSSでサイズを整える
・jQueryで地図を表示するスクリプト文を記述
・オリジナルアイコンを用意する
・google mapはカラー変更がアップ可能

しかしjQueryって<head>タグ内で読み込ませる???

でも、google mapを読み込ませるのに、そんなにごにょごにょしないといけない?

簡単な方法があるはず。

プラグインで出来そうだけどプラグインも重たくなるのであまり増やしたくない。

コピペで1発でできない?のか更にググると

色々出てきますね

 

なんか超簡単にできそうな雰囲気

htmlに直接コピペで貼り付けると出来ましたよ。

マップの色の変更はこちら

http://www.dwzone-it.com/StyledMapWizard/StyledMapWizard.asp

サイトが英語だけど適当にごにょごにょしてJSONボタンを押してコードをコピーできて簡単

 

あとはアイコンを作って

影を付けるスクリプトを書くよりアイコンそのものに影を付けたほうがお手軽ですね。

アイコンを影付きにできる作成サイトがあります。BROマップアイコン影なし

作成サイトで影をつけると

 

htmlで色を変えたgoogle mapを呼び出し、そこにこのアイコンを差し込むと完成

 

あと、wordpressや、このサイトや動画は素人作成で、

見よう見真似で行ってますのでご質問はパスとしますね