現在、あるサイトをスクレイピングして「場所の名前、緯度、経度」を抜き出してJson形式で保存し、それらの場所を地図にマッピングして表示しようとしています。
しかし私にはjavascriptの知識が全くないため、質問させていただきました。
地図上に配置したマーカーに、情報ウィンドウを追加して、マーカーをクリックすると詳細情報や画像が表示されるようにしたいのですが、それを実現するにはどのようなjavascriptのコードを下記のコードに追加すればよいでしょうか?
アドバイスお願いします。
スクレイピングコード
python
1from lxml.html import parse 2import urllib.request 3import geocoder 4import json 5 6def main(): 7 parsed = parse(urllib.request.urlopen('スクレイピングしたいサイトのURL')) 8 doc = parsed.getroot() 9 blog_node = doc.xpath('要素のXpath')[0] 10 11 json_data = [] 12 for a in blog_node.xpath('一つ一つの要素のXpath'): 13 href = a.get("href") 14 if href: 15 lat,lng = geo(a.text) 16 if lat: #緯度経度が取得できたもののみ 17 json_data.append({ 18 "name": a.text, 19 "lat": lat, 20 "lng": lng 21 }) 22 23 with open('data.json', 'w') as outfile: 24 json.dump(json_data, outfile, indent=4, sort_keys=True) 25 26def geo(name): 27 Localname = name 28 g = geocoder.google(Localname) 29 return g.lat,g.lng 30 31if __name__ == '__main__': 32 main()
json読み込みコード
javascript
1var map; 2 3function initialize() { 4 var latlng = new google.maps.LatLng(35.383575, 139.344170); 5 var options = { 6 zoom: 10, 7 center: latlng, 8 mapTypeId: google.maps.MapTypeId.ROADMAP 9 }; 10 map = new google.maps.Map(document.getElementById("map_canvas"), options); 11 map.setCenter(latlng); 12} 13 14function loadJson(){ 15 var json = []; 16 $(function(){ 17 $.getJSON("data.json" , function(data) { 18 json = data; 19 }); 20 }); 21 22 //JSONの要素数分マーカーを作成 23 for (i = 0; i < json.length; i++) { 24 latlng = new google.maps.LatLng(json[i].lat, json[i].lng); 25 var marker = new google.maps.Marker({ 26 position: latlng, 27 map: map, 28 }); 29 } 30}
htmlコード
html
1<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3<html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 6 <meta name="robots" content="noindex,nofollow,noarchive" /> 7 <title>GoogleMapsAPI Sample</title> 8 <script src="http://maps.googleapis.com/maps/api/js?key=自分のAPIキー&sensor=false" 9 type="text/javascript"></script> 10 <script src="./js/sample.js" type="text/javascript"></script> 11 <script src="./js/jquery-1.5.2.js" type="text/javascript" ></script> 12 </head> 13 <body onload="initialize()"> 14 <div id="map_canvas" style="width: 500px; height: 500px"></div> 15 <form> 16 <p> 17 <input type="button" id="btn" value="マーカー作成" onclick="loadJson()" /> 18 </p> 19 </form> 20 </body> 21</html>
参考サイト:
http://sanvarie.hatenablog.com/entry/2015/12/06/104506
https://developers.google.com/maps/documentation/javascript/infowindows?hl=ja
回答1件
あなたの回答
tips
プレビュー