はじめに
以前にJSON形式のファイルで指定した複数の場所をGoogle Mapにマーカーで表示するものを作りました。
その後、マーカーで表示する複数の場所を表でまとめて、表中の項目をクリックするとGoogle Maps上で該当する場所が中心に移動するという要望があったので実装しました。
「google.maps.Map(document.getElementById」の返値と場所の緯度、経度を格納する配列を大域変数にする必要がありましたが、その他は以前と同じです。
今回はGoogle Codeにピッタリのサンプルがあったので参考にしています。
JSONに変換するスクリプトは「CSVをJSONに変換する」に掲載しています。
環境
- JQuery ver.1.5.2
- Google Maps JavaScript API V3
動作確認
OperaとGoogle Chromeは、ローカルでは動作しなかった。
- Mozila Firefox ver.4.0
- Opera ver.11.10
- Safari v.5.0.2
- Google Chrome v.11.0.696.65
- IE 8.0.6001.18702
- IE9(IETester v.0.4.8)
- IE7(IETester v.0.4.8)
- IE6(IETester v.0.4.8)
JSON(googlemaps.json)
UTF-8で保存。
{"Marker":[ {"lat":"36.7497509313276","lng":"-119.754796028137","content":"<p>UCSF, USA</p>"}, {"lat":"39.7420423295066","lng":"-86.1725735664367","content":"<p>Eli Lilly and Company, USA</p>"}, {"lat":"55.96241378828613","lng":"-3.2349157333374023","content":"<p>MRC Human Genetics Unit, UK</p>"}, {"lat":"48.8431836927055","lng":"2.3446691036224365","content":"<p>Curie Institute, France</p>"} ]}
XHTML
UTF-8で保存。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="common.css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=ja"></script> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="googlemaps.js"></script> <title>Google Maps Test</title> </head> <body> <div id="container"> <table> <tbody> <tr> <td> <a href="#" onclick="map.panTo(mv[0]); return false;">UCSF (USA)</a> </td> </tr> <tr> <td> <a href="#" onclick="map.panTo(mv[1]); return false;">Eli Lilly and Company (USA)</a> </td> </tr> <tr> <td> <a href="#" onclick="map.panTo(mv[2]); return false;">MRC Human Genetics Unit (UK)</a> </td> </tr> <tr> <td> <a href="#" onclick="map.panTo(mv[3]); return false;">Curie Institute (France)</a> </td> </tr> </tbody> </table> <div id="googlemaps"></div> <div id="footer-space"></div> </div> <div id="foot"> Copyright© hoge All rights reserved. </div> </body> </html>
CSS(common.css)
UTF-8で保存。
* { margin: 0px; padding: 0px; } html { height: 100%; } body { font-size: 12px; line-height: 1.6; background: #ffffff; margin: 0px; text-align: center; height: 100%; } #container { margin: 0px auto -30px auto; padding: 0px 10px 0px 10px; text-align: left; border-top: none; border-bottom: none; border-left: 1px solid #14acdd; border-right: 1px solid #14acdd; background: #ffffff; width: 920px; min-height: 100%; height: auto !important; height: 100%; } #foot { margin: 0px auto 0px auto; padding: 0px; color: #666666; text-align: center; font-size: 12px; border-top: 1px solid #999999; background: #ffffff; width: 900px; /* height is related to the following. #container (margin -30px and min-height and height) #footer-space html (height) body (height) [etc] border-top in #foot is 1px. Therefore I subtract 30 - 1 = 29px. */ height: 29px; } #googlemaps { margin: 0px auto 0px auto; width: 900px; height: 300px; }
JavaScript(googlemaps.js)
UTF-8で保存。
var filename_json = "googlemaps.json"; var id_map = "googlemaps"; var init_zoom = 4; var center_lat = 45.583289756006316; var center_lng = 137.8125; // for moving google maps var map; var mv = []; // // main // $( function() { $.ajax({ url: filename_json, cache: false, dataType: "json", success: function( json ) { var data = json_read( json ); initialize( data ); } }); }); // // Read JSON data // function json_read( json ) { var data = []; if( json.Marker ) { for(var i = 0; i < json.Marker.length; i++) { data.push( json.Marker[i] ); } } return data; } // // Initialize Google Maps // function initialize( array ) { var op = { zoom: init_zoom, center: new google.maps.LatLng(center_lat, center_lng), mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.TOP_RIGHT }, navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL, position: google.maps.ControlPosition.TOP_LEFT }, scaleControl: true, scaleControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT } }; // for moving google maps // var map = new google.maps.Map(document.getElementById( id_map ), op); map = new google.maps.Map(document.getElementById( id_map ), op); var iw = new google.maps.InfoWindow(); for (var i = 0; i < array.length; i++) { var data = array[i]; var obj = { position: new google.maps.LatLng(data.lat, data.lng), map: map }; var marker = new google.maps.Marker( obj ); attach_message(map, marker, data.content, iw); delete_infowindow(marker, iw); // for moving google maps mv[ i ] = new google.maps.LatLng(data.lat, data.lng); } } // // Attach Message // function attach_message( map, marker, msg, iw ) { google.maps.event.addListener(marker, 'click', function( event ) { iw.setContent( msg ); iw.open(map, marker); }); } // // Delete infomation window // function delete_infowindow( marker, iw ) { google.maps.event.addListener(marker, 'dragstart', function( event ) { iw.close(); }); }
created by Rinker
¥3,168
(2025/02/10 08:35:17時点 楽天市場調べ-詳細)
Comments