Google Maps APIとJSONと複数マーカーと地図移動

INDEX

はじめに
環境
動作確認
JSON（googlemaps.json）
XHTML
CSS（common.css）
JavaScript（googlemaps.js）

はじめに

以前にJSON形式のファイルで指定した複数の場所をGoogle Mapにマーカーで表示するものを作りました。
その後、マーカーで表示する複数の場所を表でまとめて、表中の項目をクリックするとGoogle Maps上で該当する場所が中心に移動するという要望があったので実装しました。

「google.maps.Map(document.getElementById」の返値と場所の緯度、経度を格納する配列を大域変数にする必要がありましたが、その他は以前と同じです。
今回はGoogle Codeにピッタリのサンプルがあったので参考にしています。
JSONに変換するスクリプトは「CSVをJSONに変換する」に掲載しています。

環境

JQuery ver.1.5.2
Google Maps JavaScript API V3

動作確認

OperaとGoogle Chromeは、ローカルでは動作しなかった。

Mozila Firefox ver.4.0
Opera ver.11.10
Safari v.5.0.2
Google Chrome v.11.0.696.65
IE 8.0.6001.18702
IE9（IETester v.0.4.8）
IE7（IETester v.0.4.8）
IE6（IETester v.0.4.8）

JSON（googlemaps.json）

UTF-8で保存。

{"Marker":[
    {"lat":"36.7497509313276","lng":"-119.754796028137","content":"<p>UCSF, USA</p>"},
    {"lat":"39.7420423295066","lng":"-86.1725735664367","content":"<p>Eli Lilly and Company, USA</p>"},
    {"lat":"55.96241378828613","lng":"-3.2349157333374023","content":"<p>MRC Human Genetics Unit, UK</p>"},
    {"lat":"48.8431836927055","lng":"2.3446691036224365","content":"<p>Curie Institute, France</p>"}
]}

XHTML

UTF-8で保存。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="common.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;amp;language=ja"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="googlemaps.js"></script>
<title>Google Maps Test</title>
</head>
<body>

<div id="container">

<table>
<tbody>
<tr>
<td>
<a href="#" onclick="map.panTo(mv[0]); return false;">UCSF (USA)</a>
</td>
</tr>

<tr>
<td>
<a href="#" onclick="map.panTo(mv[1]); return false;">Eli Lilly and Company (USA)</a>
</td>
</tr>

<tr>
<td>
<a href="#" onclick="map.panTo(mv[2]); return false;">MRC Human Genetics Unit (UK)</a>
</td>
</tr>

<tr>
<td>
<a href="#" onclick="map.panTo(mv[3]); return false;">Curie Institute (France)</a>
</td>
</tr>
</tbody>
</table>

<div id="googlemaps"></div>
<div id="footer-space"></div>
</div>

<div id="foot">
Copyright&copy; hoge All rights reserved.
</div>
</body>
</html>

CSS（common.css）

UTF-8で保存。

*
{
    margin: 0px;
    padding: 0px;
}

html
{
    height: 100%;
}

body
{
    font-size: 12px;
    line-height: 1.6;
    background: #ffffff;
    margin: 0px;
    text-align: center;
    height: 100%;
}

#container
{
    margin: 0px auto -30px auto;
    padding: 0px 10px 0px 10px;
    text-align: left;
    border-top: none;
    border-bottom: none;
    border-left: 1px solid #14acdd;
    border-right: 1px solid #14acdd;
    background: #ffffff;
    width: 920px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

#foot
{
    margin: 0px auto 0px auto;
    padding: 0px;
    color: #666666;
    text-align: center;
    font-size: 12px;
    border-top: 1px solid #999999;
    background: #ffffff;
    width: 900px;
    /*
        height is related to the following.
        #container (margin -30px and min-height and height)
        #footer-space
        html (height)
        body (height)

        [etc]
        border-top in #foot is 1px.
        Therefore I subtract 30 - 1 = 29px.
    */
    height: 29px;
}

#googlemaps
{
    margin: 0px auto 0px auto;
    width: 900px;
    height: 300px;
}

JavaScript（googlemaps.js）

UTF-8で保存。

var filename_json = "googlemaps.json";
var id_map        = "googlemaps";
var init_zoom     = 4;
var center_lat    = 45.583289756006316;
var center_lng    = 137.8125;

// for moving google maps
var map;
var mv = [];

//
// main
//
$( function() {
    $.ajax({
    url: filename_json,
    cache: false,
    dataType: "json",
    success: function( json )
    {
        var data = json_read( json );
        initialize( data );
    }
});

});

//
// Read JSON data
//
function json_read( json )
{
    var data = [];

    if( json.Marker )
    {
        for(var i = 0; i < json.Marker.length; i++)
        {
            data.push( json.Marker[i] );
        }
    }
    return data;
}

//
// Initialize Google Maps
//
function initialize( array )
{
    var op = {
        zoom: init_zoom,
        center: new google.maps.LatLng(center_lat, center_lng),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL,
            position: google.maps.ControlPosition.TOP_LEFT
        },
        scaleControl: true,
        scaleControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_LEFT
        }
    };

    // for moving google maps
    // var map = new google.maps.Map(document.getElementById( id_map ), op);
    map = new google.maps.Map(document.getElementById( id_map ), op);

    var iw  = new google.maps.InfoWindow();

    for (var i = 0; i < array.length; i++)
    {
        var data = array[i];

        var obj = {
            position: new google.maps.LatLng(data.lat, data.lng),
            map: map
        };

        var marker = new google.maps.Marker( obj );

        attach_message(map, marker, data.content, iw);
        delete_infowindow(marker, iw);

        // for moving google maps
        mv[ i ] = new google.maps.LatLng(data.lat, data.lng);
    }
}

//
// Attach Message
//
function attach_message( map, marker, msg, iw )
{
    google.maps.event.addListener(marker, 'click', function( event )
    {
        iw.setContent( msg );
        iw.open(map, marker);
    });
}

//
// Delete infomation window
//
function delete_infowindow( marker, iw )
{
    google.maps.event.addListener(marker, 'dragstart', function( event )
    {
        iw.close();
    });
}