• WEB

Google Maps API PHPとAjaxを使ったマップの切り替え

  • いまこ
    いまこ システムちーむ
  • このエントリーをはてなブックマークに追加
Google Maps API PHPとAjaxを使ったマップの切り替え

こんにちは、いまこです。

前回、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

仕組み

  1. index.htmlにアクセス
  2. リンクをクリックし、Ajax通信でリンクのidをPHPへ送信
  3. PHPでidを受け取り、idを基にMapを生成するためのデータを整形
  4. 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="http://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の外に置き、
そのリンクをクリックすると、マーカークリック時とおなじ処理を行う、
なんてこともできます。

結構色々なことができるので、ぜひ試してみてください。

このエントリーをはてなブックマークに追加

いまこが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ