Last active
March 14, 2016 08:25
-
-
Save Yosuke-Kawakami/6ff6c89c2983f5c00103 to your computer and use it in GitHub Desktop.
Google Maps JavaScript API v3 のメモ。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var MAX_SIZE = 18; | |
| var MIN_SIZE = 11; | |
| var mJsonArray = | |
| [ | |
| { | |
| "name" : "東京駅" , | |
| "lat" : "35.681111" , | |
| "lng" : "139.766667", | |
| "key_1" : "value_01" , | |
| "key_2" : "value_02" , | |
| "key_3" : "value_03" , | |
| "key_4" : "value_04" , | |
| }, | |
| { | |
| "name" : "二重橋前駅", | |
| "lat" : "35.680361" , | |
| "lng" : "139.761667" , | |
| "key_1" : "value_11" , | |
| "key_2" : "value_12" , | |
| "key_3" : "value_13" , | |
| "key_4" : "value_14" , | |
| }, | |
| ]; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <title>マップとバルーン</title> | |
| <style type="text/css"> | |
| html { height: 100% } | |
| body { height: 100%; margin: 0; padding: 0 } | |
| #map_section { height: 100% } | |
| </style> | |
| <script type="text/javascript" src="globals.js"></script> | |
| <script type="text/javascript" | |
| // localhost | |
| src="http://maps.googleapis.com/maps/api/js?sensor=false"> | |
| </script> | |
| <script type="text/javascript"> | |
| function initialize() | |
| { | |
| var option = | |
| { | |
| center : new google.maps.LatLng(35.681111, 139.766667), | |
| zoom : 14, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP, | |
| maxZoom : MAX_SIZE, | |
| minZoom : MIN_SIZE, | |
| /* 以下のパラメータ値は必要に応じて編集する */ | |
| draggable : false, | |
| mapTypeControl : false, | |
| streetViewControl: false, | |
| }; | |
| map = new google.maps.Map(document.getElementById("map_section"), option); | |
| setMarkers(map); | |
| } | |
| /** | |
| * | |
| * | |
| */ | |
| function setMarkers(map) | |
| { | |
| markers = []; | |
| infoWindows = []; | |
| currentBalloon = null; | |
| for(var index = 0; index < Object(mJsonArray).length; index++) | |
| { | |
| var json = Object(mJsonArray)[index]; | |
| var s = getInfoWindowMessage(json); | |
| markers.push( | |
| new google.maps.Marker({ | |
| map : map, | |
| position : new google.maps.LatLng( json["lat"] , json["lng"] ), | |
| }) | |
| ); | |
| infoWindows.push( | |
| new google.maps.InfoWindow({ | |
| content: s, | |
| }) | |
| ); | |
| setInfoWindow(index); // ループ文の中で Index 値つかってやらないのがポイント | |
| } | |
| } | |
| /** | |
| * バルーンに表示する文字列を適当に作る。<br> | |
| * 下の例は本当に適当に作っているのでもう少しマシなものを作ろう！<br> | |
| */ | |
| function getInfoWindowMessage(json) | |
| { | |
| return "key_1 : " + json["key_1"] + "<br>"+ "key_2 : " + json["key_2"]; | |
| } | |
| /** | |
| * | |
| * | |
| */ | |
| function setInfoWindow(index) | |
| { | |
| markers[index].addListener('click' , function(){ | |
| if(currentBalloon) currentBalloon.close(); | |
| infoWindows[index].open(map, markers[index]); | |
| currentBalloon = infoWindows[index]; | |
| // markers[index] 使ってスマートに実装したい | |
| var json = Object(mJsonArray)[index]; | |
| map.panTo(new google.maps.LatLng(json["lat"], json["lng"])); | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body onload="initialize()"> | |
| <section id="map_section" /> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment