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

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

ただいまの
回答率

90.38%

  • JavaScript

    21504questions

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

  • Python

    12839questions

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

  • Python 3.x

    10718questions

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

  • Google マップ

    440questions

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

pythonからgooglemaps APIを使いたい

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,713

memu2

score 10

現在、あるサイトをスクレイピングして「場所の名前、緯度、経度」を抜き出してJson形式で保存し、それらの場所を地図にマッピングして表示しようとしています。
しかし私にはjavascriptの知識が全くないため、質問させていただきました。
地図上に配置したマーカーに、情報ウィンドウを追加して、マーカーをクリックすると詳細情報や画像が表示されるようにしたいのですが、それを実現するにはどのようなjavascriptのコードを下記のコードに追加すればよいでしょうか?
アドバイスお願いします。

スクレイピングコード

from lxml.html import parse
import urllib.request
import geocoder
import json

def main():
    parsed = parse(urllib.request.urlopen('スクレイピングしたいサイトのURL'))
    doc = parsed.getroot()
    blog_node = doc.xpath('要素のXpath')[0]

    json_data = []
    for a in blog_node.xpath('一つ一つの要素のXpath'):
        href = a.get("href")
        if href:
            lat,lng = geo(a.text)
            if lat: #緯度経度が取得できたもののみ
                json_data.append({
                                "name": a.text,
                                "lat": lat,
                                "lng": lng
                                })

    with open('data.json', 'w') as outfile:
        json.dump(json_data, outfile, indent=4, sort_keys=True)

def geo(name):
    Localname = name
    g = geocoder.google(Localname)
    return g.lat,g.lng

if __name__ == '__main__':
    main()

json読み込みコード

var map;

function initialize() {
  var latlng = new google.maps.LatLng(35.383575, 139.344170);
  var options = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), options);
  map.setCenter(latlng);
}

function loadJson(){
  var json = [];
  $(function(){
    $.getJSON("data.json" , function(data) {
    json = data;
    });
  });

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

htmlコード

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="robots" content="noindex,nofollow,noarchive" />
    <title>GoogleMapsAPI Sample</title>
    <script src="http://maps.googleapis.com/maps/api/js?key=自分のAPIキー&sensor=false"
            type="text/javascript"></script>
    <script src="./js/sample.js" type="text/javascript"></script>
    <script src="./js/jquery-1.5.2.js" type="text/javascript" ></script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width: 500px; height: 500px"></div>
    <form>
    <p>
    <input type="button" id="btn" value="マーカー作成" onclick="loadJson()" />
    </p>
    </form>
  </body>
</html>

参考サイト:
http://sanvarie.hatenablog.com/entry/2015/12/06/104506
https://developers.google.com/maps/documentation/javascript/infowindows?hl=ja

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2018/04/04 15:41

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

    キャンセル

  • memu2

    2018/04/05 11:05

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

    キャンセル

回答 1

checkベストアンサー

0

 javascriptのループのようなもの

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/05 11:44

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

    キャンセル

  • 2018/04/05 11:50

    > varの文字がjavascriptにおける変数宣言のようなもの
    そのとおりです。

    > map:mapの部分が情報ウィンドウに関する記述
    違います。mapは地図のことです。
    情報ウィンドウは、google.maps.InfoWindow クラスで作成します。

    キャンセル

  • 2018/04/05 11:51

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

    キャンセル

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

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21504questions

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

  • Python

    12839questions

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

  • Python 3.x

    10718questions

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

  • Google マップ

    440questions

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