まいける's Tech Blog

LAMP関係のメモなどを不定期に掲載します

Google Maps API v3 で全てのマーカーが表示されるようにズームレベルを調整する方法

 v2 では、 getBoundsZoomLevel を使えばよかったのですが、v3 ではなくなってしまいました。仕方がないので、この機能を使う部分だけは v2 のままでいたのですが、いつの間にか代替機能が追加されていました(この機能に気づく前に、Google Maps API V3ではgetBoundsZoomLevelが使えないを参考に v3 対応させたのですが、以下で紹介する方法のほうが通常は簡単)。
 XMLからのデータ読み込みと併せてご紹介します。

 マーカーの XML は、こんな感じで準備しておきます。

<?xml version="1.0" encoding="UTF-8"?>
<markers>
  <marker name="マーカーA" lat="34.6981457" lon="135.5071395"/>
  <marker name="マーカーB" lat="34.6980680" lon="135.5070339"/>
  <marker name="マーカーC" lat="34.6980624" lon="135.5072978"/>
  <marker name="マーカーD" lat="34.6980652" lon="135.5073006"/>
</markers>

 また、このスクリプトでは、北東端と南西端が必要になるので、取得しておきます。データベースに位置情報が入っている場合は、MAX と MIN で取得できると思います。

 で、 javascript のほうですが

<script type="text/javascript" charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false&language=ja"></script>

<script type="text/javascript">
function initialize() {
    var myLatlng = new google.maps.LatLng(34.6980596, 135.5073700);

    var myOptions = {
      zoom: 18,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var latlng_ne = new google.maps.LatLng(34.6981457, 135.5073006);
    var latlng_sw = new google.maps.LatLng(34.6980624, 135.5070339);
    var bounds = new google.maps.LatLngBounds(latlng_sw, latlng_ne);
    
    map.fitBounds(bounds);

    // For more information on doing XMLHR with jQuery, see these resources:
    // http://net.tutsplus.com/tutorials/javascript-ajax/use-jquery-to-retrieve-data-from-an-xml-file/
    // http://marcgrabanski.com/article/jquery-makes-parsing-xml-easy
    jQuery.get("XMLファイルのURL", {}, function(data) {
      jQuery(data).find("marker").each(function() {
        var marker = jQuery(this);
        var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),
                                    parseFloat(marker.attr("lon")));
        var lo_name = marker.attr("name");
        var marker = new google.maps.Marker({title:  name, position: latlng, map: map});
     });
    });
  }
</script>

 後半は、Google Maps API のサンプルを参考にしています(要:jQuery)。実際に使っているスクリプトを少しいじっているので、やや心配ですが、たぶん動くはずです…。