勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Google Maps APIでマーカーが全て表示されるように自動ズームする方法

   2024/01/13  Google Maps API Google

Google Maps APIでマーカーを複数設置した場合にズームの値や、マーカーの位置によっては全てのマーカーが表示されない場合がある。これを何とかしたかった。調べると自動でズーム調整できる機能がある模様。以下に実装方法をメモ。

 

サンプル

https://taitan916.info/sample/autozoom/

 

ソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>GoogleMapsAPI　自動ズームテスト</title>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>

    <div id="map_canvas" style="width:500px; height:500px;"></div>

    <script>
    var mapData = [
        { 'name':'大阪城', 'x':'34.687315', 'y':'135.526201'}, 
        { 'name':'通天閣', 'x':'34.644885', 'y':'135.494516'}, 
        { 'name':'道頓堀', 'x':'34.668548', 'y':'135.502715'}, 
        { 'name':'京都タワー', 'x':'34.987574', 'y':'135.759362'}, 
    ];
    var minLat = 999;
    var maxLat = 0;
    var minLng = 999;
    var maxLng = 0;

    var currentWindow = null;

    var latlng = new google.maps.LatLng(mapData[0].x, mapData[0].y);
    var myOptions = {
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //map生成

    for (var key in mapData){
        makeMarker(mapData[key]);
    }

    autoZoom( maxLat, minLat, maxLng, minLng );

    //マーカー作成
    function makeMarker( mapData ){
        if( !mapData ) return false;

        if(mapData.x < minLat) minLat = mapData.x;
        if(mapData.x > maxLat) maxLat = mapData.x;
        if(mapData.y < minLng) minLng = mapData.y;
        if(mapData.y > maxLng) maxLng =mapData.y;

        var marker = new google.maps.Marker({
            position : new google.maps.LatLng(mapData.x,mapData.y), 
            map: map 
        });

        var infoWindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, 'click', function() {
            if( currentWindow ) currentWindow.close();

            infoWindow.setContent(mapData.name);
            infoWindow.open(map,marker);
            currentWindow = infoWindow;
        });
    }

    //オートズーム
    function autoZoom( maxLat, minLat, maxLng, minLng ){
        if( !maxLat || !minLat || !maxLng || !minLng ) return false;

        var sw = new google.maps.LatLng(maxLat,minLng);
        var ne = new google.maps.LatLng(minLat,maxLng);
        var bounds = new google.maps.LatLngBounds(sw, ne);
        map.fitBounds(bounds);
    }

    </script>
</body>
</html>

 

その他

fitBoundsメソッドで対応できるみたい。これは便利。

 - Google Maps API Google

  関連記事

HTML5のGeolocation APIで位置情報を取得してGoogleMapAPIで使用する方法

GPSみたいな位置情報を取得しGoogleMapAPIでその場所を反映させたかっ ...

Google Maps APIで半径●メートル範囲を円で表示する方法

Google Maps APIでマーカーを立てて、そこから範囲●mもしくは●km ...

Google Maps APIでヒートマップを表示する方法

Google Maps APIで花粉状況や雨量を可視化しやすいようなヒートマップ ...

androidでgeolocationを使うとtimeoutになる

Geolocation APIを用いて現在地をGoogleMapに表示させるとい ...

Google Maps APIで複数のマーカーをまとめる方法

Google Maps APIでマーカーを複数表示し、近隣のエリアごとにまとめて ...