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)。実際に使っているスクリプトを少しいじっているので、やや心配ですが、たぶん動くはずです…。