勉強したことのメモ

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で使用する方法
HTML5のGeolocation APIで位置情報を取得してGoogleMapAPIで使用する方法

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

GoogleMapAPIで住所・経度緯度入力後にマーカーを移動させる
GoogleMapAPIで住所・経度緯度入力後にマーカーを移動させる

フォーム内に住所・経度・緯度のテキストボックスを設置し、住所を入力後にボタンを押 ...

Google Maps APIとPHPを組み合わせて複数マーカーとウィンドウを連携させる方法
Google Maps APIとPHPを組み合わせて複数マーカーとウィンドウを連携させる方法

やりたかった事は以下の通り。 mysqlから経度緯度、マーカー名、マーカーIDを ...

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

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

GoogleMapAPIのジオコードで存在するはずの住所が見つからない場合の原因について(ZERO_RESULTS)
GoogleMapAPIのジオコードで存在するはずの住所が見つからない場合の原因について(ZERO_RESULTS)

GoogleMapAPIを利用したプログラムで確かに存在するはずの住所をジオコー ...