[JavaScript] Google Maps API V3 で JSON/XML を読み込んで複数のマーカーを追加してみた

JSONまたはXMLなどの外部データを読み込んで、複数のマーカーをGoogle Maps API V3 に追加してみました。

Reference

Google公式のリファレンスを参考にしました。

参考：Google Maps Javascript API V3 Reference
Google Maps JavaScript API V3 は IE6 サポート対象外なのでお気をつけ下さい。

JSONデータからMarkerを生成

JSONファイルを読み込んで、複数のMarkerをマップ上に追加してみました。

1. JSONファイルを読み込む

Google Maps JavaScript API V3 から、XMLファイルの読み込み関数と XMLパーサーのライブラリがなくなりました。
バージョン2でいうと、GDownloadUrl関数や GXml.parse などです。

なので、jQueryでJSONファイルを読み込んでいきます。

map.json

{"Marker":[
  {"lat":"35.507456","lng":"139.61758499999996","content":"<p>新横浜駅</p>"},
  {"lat":"35.5122276","lng":"139.62016470000003","content":"<p>横浜アリーナ</p>"},
  {"lat":"35.5109943","lng":"139.60557760000006","content":"<p>日産スタジアム</p>"},
  {"lat":"35.510076067585594","lng":"139.61664086242672","content":"<p>新横浜国際ホテル</p>"}
]}

JavaScript

$.ajax({
  url:"map.json",
  cache:false,
  dataType:"json",
  success:function(json){
    // 読み込み完了
    var data=jsonRequest(json);
  }
});

読み込んだJSONファイルを配列にまとめます。
マーカーで使うデータを Markerオブジェクトから集めて配列を作成します。

JavaScript

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

2. 複数のMarkerクラスを生成

Mapクラスを生成して、配列からネストしながら Markerクラスを追加していきます。

function initialize(data/*Array*/){
  var op={
    zoom:15,
    center:new google.maps.LatLng(35.507456,139.617585),
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("map_canvas"),op);

  var i=data.length;
  while(i-- >0){
    var dat=data[i];
    var obj={
      position:new google.maps.LatLng(dat.lat,dat.lng),
      map:map
    };
    var marker=new google.maps.Marker(obj);
  }
}

まとめ

１〜２をまとめると以下のようになります。

<html lang="ja">
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript">
// <![CDATA[
$(function(){
  // JSONファイル読み込み開始
  $.ajax({
    url:"map.json",
    cache:false,
    dataType:"json",
    success:function(json){
      var data=jsonRequest(json);
      initialize(data);
    }
  });
});

// JSONファイル読み込み完了
function jsonRequest(json){
  var data=[];
  if(json.Marker){
    var n=json.Marker.length;
    for(var i=0;i<n;i++){
      data.push(json.Marker[i]);
    }
  }
  return data;
}

// マップを生成して、複数のマーカーを追加
function initialize(data/*Array*/){
  var op={
    zoom:15,
    center:new google.maps.LatLng(35.507456,139.617585),
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("map_canvas"),op);

  var i=data.length;
  while(i-- >0){
    var dat=data[i];
    var obj={
      position:new google.maps.LatLng(dat.lat,dat.lng),
      map:map
    };
    var marker=new google.maps.Marker(obj);
  }
}
// ]]>
</script>
</head>
<body>
<div id="map_canvas" style="width:550px;height:400px"></div>
</body>

サンプル

Example：gmap-sample-4.html

XMLデータからMarkerを生成

XMLファイルから、複数のMarker情報を読み込んでみます。

XMLが読み込まれたら、XMLパーサーを経由して配列にしています。
JSONデータからMarkerを生成で使用した、jsonRequest メソッドを xmlRequest メソッドに置き換えました。あとは、ほぼ同じです。

map.xml

<?xml version="1.0" encoding="utf-8"?>
<root>
  <MarkerData>
    <marker lat="35.507456" lng="139.61758499999996">
      <icon>atlas</icon>
      <content><![CDATA[
        <p>新横浜駅</p>
      ]]></content>
    </marker>
    <marker lat="35.5122276" lng="139.62016470000003">
      <icon>atlas</icon>
      <content><![CDATA[
        <p>横浜アリーナ</p>
      ]]></content>
    </marker>
    <marker lat="35.5109943" lng="139.60557760000006">
      <icon>atlas</icon>
      <content><![CDATA[
        <p>日産スタジアム</p>
      ]]></content>
    </marker>
    <marker lat="35.510076067585594" lng="139.61664086242672">
      <icon>atlas</icon>
      <content><![CDATA[
        <p>新横浜国際ホテル</p>
      ]]></content>
    </marker>
  </MarkerData>
</root>

HTML

<html lang="ja">
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript">
// <![CDATA[
$(function(){
  // XMLファイル読み込み開始
  $.ajax({
    url:"map.xml",
    cache:false,
    dataType:"xml",
    success:function(xml){
      var data=xmlRequest(xml);
      initialize(data);
    }
  });
});

// XMLファイル読み込み完了
function xmlRequest(json){
  var data=[];
  $(xml).find("MarkerData > marker").each(function(){
    var dat={};
    dat.lat=this.getAttribute("lat");
    dat.lng=this.getAttribute("lng");
    $(this).children().each(function(){
      if(this.childNodes.length>0)dat[this.tagName]=this.childNodes[0].nodeValue;
    });
    data.push(dat);
  });
  return data;
}

// マップを生成して、複数のマーカーを追加
function initialize(data/*Array*/){
  var op={
    zoom:15,
    center:new google.maps.LatLng(35.507456,139.617585),
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("map_canvas"),op);

  var i=data.length;
  while(i-- >0){
    var dat=data[i];
    var obj={
      position:new google.maps.LatLng(dat.lat,dat.lng),
      map:map
    };
    var marker=new google.maps.Marker(obj);
  }
}
// ]]>
</script>
</head>
<body>
<div id="map_canvas" style="width:550px;height:400px"></div>
</body>

サンプル

Example：gmap-simple-4-2.html

Geocoderで緯度経度を検索

住所から緯度経度を取得するために、以下のツールを作って調べました。
Geocoderで住所検索しています。

緯度経度検索：住所から緯度経度を検索 with Google Maps JavaScript API V3

Reference

JSONデータからMarkerを生成

1. JSONファイルを読み込む

2. 複数のMarkerクラスを生成

まとめ

サンプル

XMLデータからMarkerを生成

サンプル

Geocoderで緯度経度を検索

共有:

いいね: