Google Custom Search

API V3 移行のサンプル(3)

  •  updated:

前回の記事の続き。今回の Google Maps API は、個別の店舗を ID で引用

このマップのソースは以下のとおり

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Maps API V3 Unique Point Sample</title> <style type="text/css"> body {font-family: Arial, "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif; font-size: 13px;} </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script type="text/javascript"> var id = '3'; function sel(){id = document.getElementById('identidad').value; inicio();} </script> <script type="text/javascript" src="data.js"></script> <script type="text/javascript" src="id.js"></script> </head> <body> <p> <select id="identidad" onchange="sel();"> <option value="1">本店営業部(id: 1)</option> <option value="2">国分町支店(id: 2)</option> <option value="3" selected="selected">中央通支店(id: 3)</option> <option value="151">イオンモール石巻店(id: 151)</option> <option value="152">ダイシン気仙沼店(id: 152)</option> <option value="153">平成の森(id: 153)</option> </select> </p> <div id="map" style="width: 100%; height: 400px;"></div> </body> </html>

プルダウンではなくピンポイントで1箇所のみ表示する場合、function sel(){id = document.getElementById('identidad').value; inicio();} と select 要素を外すだけで済む。
つまり、店舗の数だけページを生成するような場合、各々

<script type="text/javascript">var id = '116';</script>

といった ID 指定の記述だけで、使いまわしが可能。
データファイルは data.js(UTF-8)を参照。
id.js の内容は以下のとおり

// by Japonyol 2013. // google.maps.visualRefresh = true; var japonyol, marcador; var infoVentana = new google.maps.InfoWindow({maxWidth:250}); function inicio() { var opcion = {zoom: 14, center: new google.maps.LatLng(38.437, 140.869), mapTypeId: google.maps.MapTypeId.ROADMAP}; japonyol = new google.maps.Map(document.getElementById('map'), opcion); google.maps.event.addListener(japonyol, 'click', function() {infoVentana.close();}); for (var i = 0, length = locations.length; i < length; i++) { var data = locations[i], latLng = new google.maps.LatLng(data.lat, data.lng); if (id == data.id) { marcador = new google.maps.Marker({position: latLng, map: japonyol, title: data.title}); (function(marcador, data) { google.maps.event.addListener(marcador, 'click', function(e) { var html = '<div style="overflow:hidden;"><b>' + data.title + '</b><br>' + data.description; html += '<br><a href="javascript:japonyol.setCenter(new google.maps.LatLng('+data.lat+', '+data.lng+')); japonyol.setZoom(17);">拡大</a> '; html += '<a href="javascript:japonyol.setCenter(new google.maps.LatLng('+data.lat+', '+data.lng+')); japonyol.setZoom(8);">縮小</a></div>'; infoVentana.setContent(html); infoVentana.open(japonyol, marcador); }); })(marcador, data); } } japonyol.setCenter(marcador.position); } google.maps.event.addDomListener(window, 'load', inicio);

なお、PHP でパラメータを渡し動的にページを表示する例は昨年やった