質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

1回答

4745閲覧

pythonからgooglemaps APIを使いたい

memu2

総合スコア16

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

1クリップ

投稿2018/04/02 04:44

現在、あるサイトをスクレイピングして「場所の名前、緯度、経度」を抜き出して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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2018/04/04 06:41

ご自身でご提示されている「参考サイト」に書いてあるとおりなんですが、ご不明な点はどこでしょうか。
memu2

2018/04/05 02:05

1つ目は、参考サイトの場合、マーカーの数もそれに付随する情報ウィンドウも一つかと思いますが、私が実現したいのは複数個のマーカーを保有するものです。 javascriptのループのようなものを使えば良いのかもしれませんが、javascriptの知識がないのでわかりません。 2つ目に、参考サイトには情報ウィンドウに画像を添付する方法が書いてありません。 この2点が私の不明点です。
guest

回答1

0

ベストアンサー

javascriptのループのようなもの

forループを使うといいかと思います。
for - JavaScript | MDN
ご提示のコードでも、以下のとおりforループが使われていますから、それをそのまま用いればいいですよ。

js

1 //JSONの要素数分マーカーを作成 2 for (i = 0; i < json.length; i++) { 3 latlng = new google.maps.LatLng(json[i].lat, json[i].lng); 4 var marker = new google.maps.Marker({ 5 position: latlng, 6 map: map, 7 }); 8 }

情報ウィンドウに画像を添付する方法

参考サイトの書かれた以下のコードのとおり、HTMLが使えますから、それでimg要素で画像を表示すればいいです。

js

1 var contentString = '<div id="content">'+ 2 '<div id="siteNotice">'+ 3 '</div>'+ 4 '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 5 '<div id="bodyContent">'+ 6 '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 7 'sandstone rock formation in the southern part of the '+ 8 'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+ 9 'south west of the nearest large town, Alice Springs; 450&#160;km '+ 10 '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+ 11 'features of the Uluru - Kata Tjuta National Park. Uluru is '+ 12 'sacred to the Pitjantjatjara and Yankunytjatjara, the '+ 13 'Aboriginal people of the area. It has many springs, waterholes, '+ 14 'rock caves and ancient paintings. Uluru is listed as a World '+ 15 'Heritage Site.</p>'+ 16 '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+ 17 'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+ 18 '(last visited June 22, 2009).</p>'+ 19 '</div>'+ 20 '</div>';

投稿2018/04/05 02:20

Lhankor_Mhy

総合スコア35867

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

memu2

2018/04/05 02:44

迅速な返信ありがとうございます。 上のコードの、varの文字がjavascriptにおける変数宣言のようなもので、map:mapの部分が情報ウィンドウに関する記述ということでしょうか? 初歩的な質問ですみません。
Lhankor_Mhy

2018/04/05 02:50

> varの文字がjavascriptにおける変数宣言のようなもの そのとおりです。 > map:mapの部分が情報ウィンドウに関する記述 違います。mapは地図のことです。 情報ウィンドウは、google.maps.InfoWindow クラスで作成します。
memu2

2018/04/05 02:51

とてもよく理解できました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問