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

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

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

<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>

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

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

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

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);

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);

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

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);

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);

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

<div id="map_canvas" style="width: 100%; height: 500px;"></div>

1	<div id="map_canvas" style="width: 100%; height: 500px;"></div>

<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>

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>

garage│Phonon cafe room│MONET

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

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);

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);

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

function create_maker(latlng, label, html, image) {
	// マーカーを生成
	var marker = new google.maps.Marker({position: latlng, map: map, title: label, icon: image});

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の活用方法は本家サイトに詳しく記載があった。

素晴らしい。