プラグインで欲しい感じの地図機能がなかなか見つからないのでJavaScriptを使ってみた。
Google Mapを埋め込む際にはAPIキーが必要となったので以下をheaderのPHPに書き込んだ。
本当は、Wordpressにおいてスクリプトを参照する場合にはルールがあるようだけれども…
とりあえずテスト的に動かしてみたかったので…
1 2 3 |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=取得したAPIキー"></script> <script type="text/javascript" src="http://cave-gl.com/wp-content/themes/sydney-pro-ii-child/map.js"></script> <script type="text/javascript" src="http://cave-gl.com/wp-content/themes/sydney-pro-ii-child/map_into.js"></script> |
1行目はGoogleMapのJavascriptを使います、でキーはこれです…てこと。
2・3行目は参考にして自作したスクリプト。
正直、2行目【map.js】のスクリプトでうまくいくものと作業していたが、クリックしてもマップ上のマーカーにリンクされず、3行目【map_into.js】を用意した。
多分…そんなことをしなくても動くと思うのだが間違いを探しきれなかった。
「どちらかが動けばいいや…」で動いた方を採用しようと思ったが、どちらかを抜くとなぜが思うように表示されない…
ビギナーだな〜と熟々情けなくなる。とりあえず、2つともサーバに残しパスを引いたままその他の作業にいってみる。
2行目でひっぱてきているスクリプト【map.js】はこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
var map = null; var infowindow = new google.maps.InfoWindow(); var gmarkers = []; var i = 0; function inicializar() { // 初期設定 var option = { // ズームレベル zoom: 13, // 中心座標 center: new google.maps.LatLng(34.747569, 137.399636), // タイプ (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択) mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), option); google.maps.event.addListener(map, "click", function() {infowindow.close();}); // ポイントの追加 var point = new google.maps.LatLng(34.728924, 137.401499); var marker = create_maker(point, "garage", "<h4>garage</h4><br><img src='http://cave-gl.com/wp-content/uploads/2017/02/ツリーマーク.png'></img><br>Lots of nice plants!"); var point = new google.maps.LatLng(34.747569, 137.399636); var marker = create_maker(point, "Phonon", "<h4>phonon cafe room</h4><br>you can drink good coffee!"); var point = new google.maps.LatLng(34.864131, 137.298327); var marker = create_maker(point, "MONET", "<h4>MONET</h4><br><img src='http://cave-gl.com/wp-content/uploads/2017/02/ツリーマーク.png'></img><br>Lots of nice plants!"); } function create_maker(latlng, label, html) { // マーカーを生成 var marker = new google.maps.Marker({position: latlng, map: map, title: label}); // マーカーをクリックした時の処理 google.maps.event.addListener(marker, "click", function() { infowindow.setContent(html); infowindow.open(map, marker); }); gmarkers[i] = marker; i++; return marker; } function map_click(i) { google.maps.event.trigger(gmarkers[i], "click"); } google.maps.event.addDomListener(window, "load", inicializar); |
3行目でひっぱてきているスクリプト【map_into.js】はこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
var map = null; var infowindow = new google.maps.InfoWindow(); var gmarkers = []; var i = 0; function inicializar() { // 初期設定 var option = { // ズームレベル zoom: 12, // 中心座標 center: new google.maps.LatLng(35.1683085, 136.9072405), // タイプ (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択) mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), option); google.maps.event.addListener(map, "click", function() {infowindow.close();}); // ポイントの追加 var point = new google.maps.LatLng(35.1676114, 136.904148); var marker = create_maker(point, "info", "<img src='画像パス' /> <a href='URL' target='_blank'>タイトル01</a>"); var point = new google.maps.LatLng(35.1675021, 136.8906085); var marker = create_maker(point, "info", "<img src='画像パス' /> <a href='URL' target='_blank'>タイトル02</a>"); var point = new google.maps.LatLng(35.1727874, 136.8852535); var marker = create_maker(point, "info", "<img src='画像パス' /> <a href='URL' target='_blank'>タイトル03</a>"); } function create_maker(latlng, label, html) { // マーカーを生成 var marker = new google.maps.Marker({position: latlng, map: map, title: label}); // マーカーをクリックした時の処理 google.maps.event.addListener(marker, "click", function() { infowindow.setContent(html); infowindow.open(map, marker); }); gmarkers[i] = marker; i++; return marker; } function map_click(i) { google.maps.event.trigger(gmarkers[i], "click"); } google.maps.event.addDomListener(window, "load", inicializar); |
とりあえず、この2つにパスを引いておいて以下の2つをHTMLに書き込めば下のような地図を作ることが出来る。
1 |
<div id="map_canvas" style="width: 100%; height: 500px;"></div> |
1 |
<a href="javascript:map_click(0)">garage</a>│<a href="javascript:map_click(1)">Phonon cafe room</a>│<a href="javascript:map_click(2)">MONET</a> |
で、最終的に採用した【map.js】のスクリプトは、こちら。
何が違うのか…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
var map = null; var infowindow = new google.maps.InfoWindow(); var gmarkers = []; var i = 0; function inicializar() { // 初期設定 var option = { // ズームレベル zoom: 13, // 中心座標 center: new google.maps.LatLng(34.747569, 137.399636), // タイプ (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択) mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), option); google.maps.event.addListener(map, "click", function() {infowindow.close();}); // ポイントの追加 var point = new google.maps.LatLng(34.728924, 137.401499); var marker = create_maker(point, "garage", "<h4>garage</h4><br><img src='http://cave-gl.com/wp-content/uploads/2017/02/ツリーマーク.png'></img><br>Lots of nice plants!","http://cave-gl.com/wp-content/uploads/2017/02/ツリーマーク.png"); var point = new google.maps.LatLng(34.747569, 137.399636); var marker = create_maker(point, "Phonon", "<h4>phonon cafe room</h4><br>you can drink good coffee!","http://cave-gl.com/wp-content/uploads/2017/02/ツリーマーク.png"); var point = new google.maps.LatLng(34.864131, 137.298327); var marker = create_maker(point, "MONET", "<h4>MONET</h4><br><img src='http://cave-gl.com/wp-content/uploads/2017/02/ツリーマーク.png'></img><br>Lots of nice plants!","http://cave-gl.com/wp-content/uploads/2017/02/ツリーマーク.png"); } function create_maker(latlng, label, html, image) { // マーカーを生成 var marker = new google.maps.Marker({position: latlng, map: map, title: label, icon: image}); // マーカーをクリックした時の処理 google.maps.event.addListener(marker, "click", function() { infowindow.setContent(html); infowindow.open(map, marker); }); gmarkers[i] = marker; i++; return marker; } function map_click(i) { google.maps.event.trigger(gmarkers[i], "click"); } google.maps.event.addDomListener(window, "load", inicializar); |
アイコンをオリジナルの画像にしてみた。
1 2 3 |
function create_maker(latlng, label, html, image) { // マーカーを生成 var marker = new google.maps.Marker({position: latlng, map: map, title: label, icon: image}); |
function create markerの末尾に【image】を追加し、【var marker=】に【icon: image】を追加。個々のポイントの【var marker =】の末尾に【”画像のULR”】を追加した。
これで、マーカーをオリジナル画像に変更できる。
Google Map APIの活用方法は本家サイトに詳しく記載があった。
素晴らしい。