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

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

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

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

Q&A

解決済

2回答

2444閲覧

Googleスプレッドシート

bird5678a

総合スコア29

JavaScript

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

0グッド

1クリップ

投稿2016/03/05 00:56

編集2016/03/05 04:19

お尋ねします。googleでマップガジェッドの追加の仕方を教えてください

Googleスプレッドシートに住所を10個を格納してgoogleマップにポインター10個出したいです。

以前の古いバージョンだとできた記憶があります。

Googleスプレッドシートに10個の住所を書くところまでできますが、ポインターの出し方がわかりまん、宜しくお願いいたします。

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

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

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

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

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

ogaaaan

2016/03/05 01:43 編集

タイトルが『google』だけってのは不適切。せめて『googleのマップガジェットの追加方法』くらいじゃないと意味が無いよ。
Lhankor_Mhy

2016/03/05 02:35

補足願います。「エクセル風シート」というのはGoogleスプレッドシートのことでしょうか?
yuta0801

2017/04/26 12:03

細かいですが誤字があります。「ポインターの出し方がわかりまん」の語尾が「わかりまん」になっています、修正願います
guest

回答2

0

所望のサイトは以下でしょうか。
http://www.ryokurian.jp/atelier/google/maps_sample1.html

投稿2016/03/05 03:21

t_obara

総合スコア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
CHERRY

総合スコア25171

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

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

CHERRY

2016/03/05 12:54

Google Spreadsheet API で、Google Spreadsheet からデータを取得するように書き換えてみました。 APIで、意外と簡単にデータが取得できるんですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問