お尋ねします。googleでマップガジェッドの追加の仕方を教えてください
Googleスプレッドシートに住所を10個を格納してgoogleマップにポインター10個出したいです。
以前の古いバージョンだとできた記憶があります。
Googleスプレッドシートに10個の住所を書くところまでできますが、ポインターの出し方がわかりまん、宜しくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/03/05 02:35
2017/04/26 12:03
回答2件
0
所望のサイトは以下でしょうか。
http://www.ryokurian.jp/atelier/google/maps_sample1.html
投稿2016/03/05 03:21
総合スコア5488
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
ベストアンサー
エクセル風シートというのがよくわからなかったのですが、タグが javascript だったので、javascript の配列の住所を元にマーカー表示ということで回答します。
google.maps.Geocoder で、住所から座標が取得できますので、住所を座標に変換して、Google Map を表示します。
サンプルだとこんな感じかな。
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>Google Maps テスト</title> 6<style type="text/css"> 7#googlemap { 8 width: 700px; 9 height: 700px; 10 margin: 0 auto; 11} 12</style> 13</head> 14<body> 15<div id="googlemap"></div> 16<script type="text/javascript"> 17var map; 18var marker = []; 19var address = [ 20 { 21 address: '東京都千代田区丸の内1-9-1', // 東京駅 22 }, { 23 address: '東京都新宿区西新宿1丁目1−3', // 新宿駅 24 }, { 25 address: '東京都渋谷区道玄坂1丁目1-1', // 渋谷駅 26 }, { 27 address: '東京都台東区上野7丁目1-1', // 上野駅 28 }, { 29 address: '東京都豊島区南池袋1丁目28-2', // 池袋駅 30 } 31]; 32 33function viewMap() { 34 var latlng = new google.maps.LatLng({lat: 35.693, lng: 139.735}); 35 map = new google.maps.Map(document.getElementById('googlemap'), { 36 center: latlng, 37 zoom: 13 38 }); 39 var geocoder = new google.maps.Geocoder(); 40 for(var i = 0; i < address.length; i++) { 41 geocoder.geocode( 42 address[i], 43 function(result, status){ 44 if(status==google.maps.GeocoderStatus.OK){ 45 marker[i] = new google.maps.Marker({ 46 position: result[0].geometry.location, 47 map: map 48 }); 49 } 50 } 51 ); 52 } 53} 54</script> 55<script src="https://maps.googleapis.com/maps/api/js?callback=viewMap"></script> 56</body> 57</html>
--
追記 (2016.03.05 21:45)
興味を持ったので、サンプルを Google Spreadsheet から、住所を取り出すようにしてみました。
KEY の部分は、Google Spreadsheet の ID です。
HTML
1<!DOCTYPE HTML> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>Google Maps テスト</title> 6<style type="text/css"> 7#googlemap { 8 width: 700px; 9 height: 700px; 10 margin: 0 auto; 11} 12</style> 13</head> 14<body> 15<div id="googlemap"></div> 16<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 17<script type="text/javascript"> 18var googleSheetUrl = "https://spreadsheets.google.com/feeds/cells/[KEY]/od6/public/basic?alt=json"; 19var map; 20var marker = []; 21 22function viewMap() { 23 var latlng = new google.maps.LatLng({lat: 35.693, lng: 139.735}); 24 map = new google.maps.Map(document.getElementById('googlemap'), { 25 center: latlng, 26 zoom: 13 27 }); 28 var geocoder = new google.maps.Geocoder(); 29 $.get({ 30 url: googleSheetUrl, 31 cache: false, 32 dataType: "jsonp", 33 success : function(data, status){ 34 $.each(data.feed.entry, function(i, item){ 35 geocoder.geocode( 36 { address: item.content.$t }, 37 function(result, status){ 38 if(status==google.maps.GeocoderStatus.OK){ 39 marker[i] = new google.maps.Marker({ 40 position: result[0].geometry.location, 41 map: map 42 }); 43 } 44 } 45 ); 46 }); 47 } 48 }); 49} 50</script> 51<script src="https://maps.googleapis.com/maps/api/js?callback=viewMap"></script> 52</body> 53</html>
投稿2016/03/05 03:15
編集2016/03/05 12:53総合スコア25171
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。