マップ上の四角いエリアを自動拡大させるスクリプト

GoogleMap Auto Zoomer.js ver 0.2 (4KB)

矩形エリアにマウスカーソルを入れると、そのエリアへズームインする

矩形エリアのサイズも自由に設定できる

ただし、矩形エリアは全体地図の縦横比と同じ形になる

サンプルのCSS

.gmap-auto-zoomer { margin: 20px; } #tokyo { width: 360px; height: 360px; } #ueno { width: 360px; height: 480px; } #soramachi { width: 600px; height: 200px; }

サンプルのHTML

<div id="tokyo" class="gmap-auto-zoomer" data-latlng="35.678843,139.766214" data-default-zoomlevel="15" data-target="35.676612,139.764245" data-info="国際フォーラム"></div> <div id="ueno" class="gmap-auto-zoomer" data-latlng="35.71272,139.77321" data-default-zoomlevel="15" data-target="35.71197,139.770617" data-zoomlevel="1" data-info="上野不忍池"></div> <div id="soramachi" class="gmap-auto-zoomer" data-latlng="35.710163,139.809978" data-default-zoomlevel="13" data-target="35.710063,139.810707" data-zoomlevel="3" data-info="東京スカイツリー"></div>