こんにちは、いまこです。
前回、Google Maps API～基本編～を書かせていただきました。
今回は応用編ということで、Ajaxを使用したMapの切り替えについて書いてきます。
目次
概要
使用言語
- HTML
- JaveScript
- Ajax
- jQuery
- PHP
- JSON
構造
root/
┠index.html
┠js/
┃ ┠jquery.js
┃ ┗map.js
┠lib/
┃ ┗ajax.php
┗conf/
┗map_conf.php
仕組み
- index.htmlにアクセス
- リンクをクリックし、Ajax通信でリンクのidをPHPへ送信
- PHPでidを受け取り、idを基にMapを生成するためのデータを整形
- JavaScriptでデータを受け取り、Map生成
仕様
- リンククリックでエリア名のMap表示
- マーカーは複数表示
- マーカークリック時に「中心に移動」「infowindowの表示」「ズーム」を行う
実行結果
ソースを見る前に、とりあえず実行結果です！
ソース
では、ソースを見ながら簡単な解説をしていきます！
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Google Maps APIの読み込み -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<title>googlemap</title>
</head>
<body>
<div id="googlemap">
<center>
<h1>Mapの切り替えを行います</h1>
<!-- idを表示Mapデータのキーと紐付け -->
<a href="#googlemap" id="aomori"><font size="5px">青森</font></a>
<a href="#googlemap" id="hirosaki"><font size="5px">弘前</font></a>
<!-- Map表示 -->
<div id="map" style="width:680px; height:380px"></div>
</center>
</div>
</body>
</html>
aタグのidと、表示Mapデータ（map_conf.php）のキーを紐付けます
<a href="#googlemap" id="aomori">青森</a>
<a href="#googlemap" id="hirosaki">弘前</a>
後は前回と一緒です。
map.js
jQuery(function($) {
// aタグがクリックされたら
$('a').click(function(){
// 変数の初期化
var areaId = '';
var centerLat = '';
var centerLng = '';
var zoom = '';
var markerData = '';
var myMap = '';
var marker = '';
// 表示するエリアid
areaId = $(this).attr('id');
// Ajax
$.ajax({
type: 'POST',
url: 'lib/ajax.php',
dataType: 'json',
data: {
// エリアidを送る
'areaId': areaId
},
// 成功処理
success: function(data, dataType){
// 表示Mapデータの取得
centerLat = data['center_lat'];
centerLng = data['center_lng'];
zoom = data['zoom'];
markerData = data['data'];
// Mapのインスタンス作成
myMap = createMap(centerLat, centerLng, zoom);
// マーカーのインスタンス生成
marker = createMarker(myMap, markerData);
// マーカークリック時処理
markerClickEvent(myMap, marker, markerData);
},
// 失敗処理
error: function(XMLHttpRequest, textStatus, errorThrown){
alert('Mapの作成に失敗しました');
}
});
});
// Map生成処理
function createMap(centerLat, centerLng, zoom)
{
var map = '';
var centerPosition = '';
var mapOptions = '';
// Map表示場所エレメント取得
map = document.getElementById("map");
// Map座標生成
centerPosition = new google.maps.LatLng(centerLat, centerLng);
// Mapのオプション設定
mapOptions = {
zoom: zoom,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Map作成
return new google.maps.Map(map, mapOptions);
}
// マーカー生成処理
function createMarker(myMap, markerData)
{
// オブジェクトとして宣言
var marker = {};
var markerPosition = '';
var markerOptions = '';
// マーカーデータをループ
$.each(markerData, function(name, val){
// マーカーの座標
markerPosition = new google.maps.LatLng(val['lat'], val['lng']);
// マーカーのオプション設定
markerOptions = {
position: markerPosition,
map: myMap,
}
// マーカーの生成
marker[name] = new google.maps.Marker(markerOptions);
});
return marker;
}
// マーカークリック時処理
function markerClickEvent(myMap, marker, markerData)
{
var markerPosition = '';
var window_options = '';
var infowindow = '';
$.each(marker, function(name, val){
// マーカークリック時処理
google.maps.event.addListener(val, 'click', function(event) {
// マーカーの座標生成
markerPosition = new google.maps.LatLng(markerData[name]['lat'], markerData[name]['lng']);
// infowindowの設定
window_options = {
content: markerData[name]['content'],
}
infowindow = new google.maps.InfoWindow(window_options);
// infowindowの表示
infowindow.open(myMap, val);
// zoom設定
myMap.setZoom(18);
// 中心に移動
myMap.panTo(markerPosition);
});
});
}
});
HTML内のaタグがクリックされた際に処理が始まります。
$('a').click(function(){/*処理*/};
HTMLで設定した、aタグのidを取得し、変数に代入します。
areaId = $(this).attr('id');
AjaxでareaId(aタグのid)を、ajax.phpへPOST送信します。
この時、dataTypeはJSON形式を使用します。
$.ajax({
type: 'POST',
url: 'lib/ajax.php',
dataType: 'json',
data: {
// エリアidを送る
'areaId': areaId
}
)};
ajax.phpで生成された表示Mapデータを取得します。
centerLat ：Mapの緯度
centerLng ：Mapの経度
zoom ：初期ズーム値
markerData：表示するマーカーデータ
centerLat = data['center_lat'];
centerLng = data['center_lng'];
zoom = data['zoom'];
markerData = data['data'];
Mapのインスタンスを生成します。
Mapのインスタンス生成については前回書いたので省略します。
myMap = createMap(centerLat, centerLng, zoom);
複数のマーカーのインスタンスを生成し、オブジェクトに格納します。
Ajax通信で受け取ったマーカーデータをループさせます。
// 第1引数（name）HTMLのidと紐付く配列のキー
// 第2引数（val）マーカーのデータ
// マーカーデータをループ
$.each(markerData, function(name, val){/*処理*/});
マーカー生成時に使用するオプションを作成します。
// マーカーの座標
markerPosition = new google.maps.LatLng(val['lat'], val['lng']);
// マーカーのオプション設定
markerOptions = {
position: markerPosition,
map: myMap,
}
マーカーを生成し、オブジェクトの中に格納します。
この時、オブジェクトのキーにnameを設定します。
// マーカーの生成
marker[name] = new google.maps.Marker(markerOptions);
配列にインスタンスを格納すると
「配列×オブジェクト」
になってしまうので、変数をオブジェクトとして宣言しておきます。
// オブジェクトとして宣言
var marker = {};
マーカークリック時処理を記述します。
- infowindowの表示
- ズーム
- 中心に移動
前回と同じように、以上を行います。
※それぞれの処理の内容は、前回記述したので省略します
今回は複数のマーカーということで、先ほど作成したマーカーのインスタンスが入っているオブジェクト（marker）を、ループさせます。
// 第1引数（name）markerDataと紐付けるためのキー
// 第2引数（val）マーカーのインスタンス
$.each(marker, function(name, val){/*処理*/});
クリックイベントの発生条件に、マーカーのインスタンス（val）を指定します。
google.maps.event.addListener(val, 'click', function(event) {/*処理*/};
markerData内に、マーカーの設定情報が格納されているため、下記のようにnameとmarkerDataのキーを紐付け、データを指定します。
markerPosition = new google.maps.LatLng(markerData[name]['lat'], markerData[name]['lng']);
これで、複数マーカーのクリック時処理が可能となります。
ajax.php
// Map設定情報読み込み
include('../conf/map_conf.php');
// Ajaxデータ取得
$areaId = $_POST['areaId'];
$data = array();
// データ整形
foreach ($mapConf as $key => $val) {
if ($key == $areaId) {
$data['center_lat'] = $val['center_lat'];
$data['center_lng'] = $val['center_lng'];
$data['zoom'] = $val['zoom'];
$data['data'] = $val['data'];
}
}
// jsonにエンコード
echo json_encode($data, JSON_FORCE_OBJECT);
Mapを生成するための設定情報を格納しているPHPを読み込みます
include('map_conf.php');
Ajax通信で送られてきたidを受け取ります。
$areaId = $_POST['areaId'];
使用するデータを整形します
読み込んだ、Mapを生成するための設定情報（$mapConf）をループさせ、受け取ったidと、設定情報のキーが一意するものを、配列に代入していきます。
foreach ($mapConf as $key => $val) {
if ($key == $areaId) {
$data['center_lat'] = $val['center_lat'];
$data['center_lng'] = $val['center_lng'];
$data['zoom'] = $val['zoom'];
$data['data'] = $val['data'];
}
}
JSON形式にエンコードします
JSON形式でAjax通信を行うので、配列をJSON形式にエンコードし、JavaScriptで使用できるよう、出力します。
echo json_encode($data, JSON_FORCE_OBJECT);
map_conf.php
// googlemap表示データ
$mapConf = array(
'aomori' => array(
'center_lat' => '40.828187',
'center_lng' => '140.738800',
'zoom' => 14,
'data' => array(
'asupamu' => array(
'lat' => '40.829599',
'lng' => '140.741032',
'content' => 'アスパム',
),
'auga' => array(
'lat' => '40.827149',
'lng' => '140.735772',
'content' => 'アウガ'
)
)
),
'hirosaki' => array(
'center_lat' => '40.603941',
'center_lng' => '140.475992',
'zoom' => 14,
'data' => array(
'hirosakizyo' => array(
'lat' => '40.607444',
'lng' => '140.464201',
'content' => '弘前城',
),
'hirosakieki' => array(
'lat' => '40.599114',
'lng' => '140.485097',
'content' => '弘前駅',
),
),
),
);
Mapに表示する設定情報を作成します。
構造は下記のとおりです。
array(
'HTMLのid名' =>
'center_lat' => 'Map緯度',
'center_lng' => 'Map経度',
'zoom' => '初期ズーム値',
'data' => array(
'マーカー名' => array(
'lat' => 'マーカー緯度',
'lng' => 'マーカー経度',
'content' => 'infowindowの中身',
),
),
),
);
以上で解説終了です！
最後に
今回は「map_conf.php」にMapのデータを詰め込みましたが、
例えばデータベースに格納すると、もっと管理が簡単になるかと思います。
またエリアだけでなく、マーカーのリンクをMapの外に置き、
そのリンクをクリックすると、マーカークリック時とおなじ処理を行う、
なんてこともできます。
結構色々なことができるので、ぜひ試してみてください。
![NUC[ナック]次世代小型PCを組んでみた](https://www.go-next.co.jp/blog/wp-content/uploads/2016/01/NUC_eyeCatch-240x135.png)
