なか日記

一度きりの人生、楽しく生きよう。

トップ > JavaScript > GoogleMapで地図の倍率を取得する

GoogleMapで地図の倍率を取得する

JavaScript

今週はGoogle Maps JavaScript API v3を使ってゴニョゴニョしていました。

きっかけは「イベントの検索サイト等で会場の地図を（Googleマップで）表示させたい」→「メンテ画面でGoogleマップを使ってポイントを設定したいなぁ」というところから始まりました。

今回は地図の倍率を取得する方法です。

わざわざブログに書くほどの事かい？という気はしますが、気にせず投稿します。

画面サンプル

f:id:nakaji999:20140725235113p:plain

コードサンプル

地図の倍率が変更されたタイミング（zoom_changedイベント）でMapクラスのgetZoom()メソッドで倍率を取得します。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>地図の倍率を取得するサンプル</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
            height: 500px;
            width: 500px;
            margin: 20px;
            padding: 20px;
        }
    </style>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
        $(function () {
            google.maps.event.addDomListener(window, 'load', initialize);

            function initialize() {
                var mapOptions = {
                    zoom: Number($("#zoom").val()),
                    center: new google.maps.LatLng(33.8391574, 132.76557520000006)
                };

                var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

                google.maps.event.addListener(map, 'zoom_changed', function (e) {
                    $("#zoom").val(map.getZoom());
                });
            }
        });

    </script>
</head>
<body>
    地図の倍率：<input id="zoom" type="text" value="15"/>
    <div id="map-canvas"></div>
</body>
</html>