id:lovefukuyama
ポイントあり550ptベストアンサーあり
インターネットウェブ制作

[良回答300pt]Googleマップの使い方について。「場所名」、「住所」、「コメント」の3列をもつ100数十行ほどのExcel

のシートがあります。これを元にGoogleマップのページを作りたいのですが、お手軽な方法を教えてください。
住所の地点にポイントされ、クリックすると場所名とコメントが表示されるというイメージです。
Google Maps APIを使う場合はVer.3でお願いします。

回答の条件
  • 1人2回まで
  • 登録：
  • 終了：2011/05/07 02:30:16
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:typista No.4

回答回数359ベストアンサー獲得回数7

ポイント400pt

＜デモ＞

http://typista.xii.jp/test/googlemaps/list2map/index.html

http://typista.xii.jp/test/googlemaps/list2map/data.csv

＊index.htmlとdata.csvはUTF8で保存してください。

100数十行ほどのExcelのシートをCSV(カンマ区切り)でdata.csvとして保存し、同階層に下記のHTMLを用意すれば「住所」を緯度経度変換してピンを置き、「場所名」、「コメント」を噴出しに表示できるようにしました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
//  google.load("jquery", "1.6");
  google.load("jquery", "1.2.6");
</script>
<script type="text/javascript" src="http://plugins.jquery.com/files/jquery.csv.js_0.txt"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
<!--
var isLabel = false;
//var isLabel = true;
var indexStart = isLabel ? 1 : 0;
var geocoder = new google.maps.Geocoder();
var list = new Array();
var add;
function showAddress(addr, index) {
　geocoder.geocode(
　　{ address: addr },
　　function(result, status){
　　　if(status == "OK") {
		  list[index]['latlng'] = result[0].geometry.location;
		  list[index]['status'] = "OK";
　　　} else {
		  if ( index == 0 ) {
			isLabel = true;
		  }
		  return null;
      }
　　}
　);
}

function showLatLng(r){
　var i, res = "";
　for(i=0; i<r.length; i++) res += (res?"\n":"") + r[i].geometry.location;
  return res;
}
//-->
</script>
<script type="text/javascript">
$(function(){
	$.get('data.csv',function(data){
		var csv = $.csv()(data);
		var index = 0;
		$(csv).each(function(){
			if(this[0] && this[1] && this[2]){
				list[index] = new Array();
				list[index]['label'] = this[0];
				list[index]['address'] = this[1];
				list[index]['comment'] = this[2];
				list[index]['status'] = "";
				showAddress(this[1], index);
				index++;
			}
		})
		checkReadyIntervalID = setInterval( checkReady, 1000 );
	})
})

var checkReadyIntervalID = null;
function checkReady() {
	indexStart = isLabel ? 1 : 0;
	console.log( list.length );
	for ( var i = indexStart; i < list.length; i++ ) {
		if ( list[i]['status'] != "OK" ) {
			return;
		}
	}
	clearInterval( checkReadyIntervalID );
	checkReadyIntervalID = null;
	for ( var i = indexStart; i < list.length; i++ ) {
		var content = list[i]['label'] + "<br />" + list[i]['comment'];
		data.push({position: list[i]['latlng'], content: content});
	}
	attachMap();
}

function attachMessage(marker, msg) {
	google.maps.event.addListener(marker, 'click', function(event) {
		new google.maps.InfoWindow({
			content: msg
		}).open(marker.getMap(), marker);
	});
}

var data = new Array();

function attachMap() {
	var myMap = new google.maps.Map(document.getElementById('map'), {
		zoom: 14,
		center: list[indexStart]['latlng'],
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	var i;
	for (i = 0; i < data.length; i++) {
		var myMarker = new google.maps.Marker({
			position: data[i].position,
			map: myMap
		});
		attachMessage(myMarker, data[i].content);
	}
}
</script>
</head>
<body>
<div id='map' style='width:740px; height:400px;'><br></div>
</body>
</html>
id:lovefukuyama

素晴らしすぎます！

感動しました。

わずかですが多めにポイント配分させて頂きます。

2011/05/07 02:30:02

その他の回答（3件）

id:readmaster No.1

回答回数74ベストアンサー獲得回数5

ポイント50pt

このあたりを参考にしてみてはどうでしょうか。

http://sites.google.com/site/gpsandbike/Home/%E6%9C%80%E6%96%B0%...

http://findaway-i.jp/google/google-maps-impor/902.html

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1115440...

id:lovefukuyama

ありがとうございます。

2011/05/07 02:29:10
id:Lhankor_Mhy No.2

回答回数814ベストアンサー獲得回数232

ポイント50pt

Google Docs のスプレッドシートにコピペして、マップガジェットを使うのが一番早そうです。

　

↓使い方

http://docs.google.com/support/bin/answer.py?hl=ja&answer=91601

↓サンプル

https://spreadsheets.google.com/pub?key=pCQbetd-CptFAQduF9vEUXA

id:lovefukuyama

ありがとうございます。

2011/05/07 02:29:13
id:saijyoh_739 No.3

回答回数113ベストアンサー獲得回数10

ポイント50pt

http://nryk-okmt.cocolog-nifty.com/blog/2010/07/googlemapsjavas....

『excel "kml変換"』でgoogle検索すると色々な方法が見つかりますよ。

質問者さんが理解できる、質問者さんの用途に合う方法見つかると良いですね。


http://office.microsoft.com/ja-jp/excel-help/HA010206396.aspx

excelの機能を使って直接作れる様にする事もできそうですね。


質問者のプロフィールも拝見しましたが、どういう事ならできるよって感じの事が全く読み取れる感じではなかったので。

kmlはgoogleのサイトで色々な情報が公開されているので、資料が読めれば扱うのは難しいわけではないのですが。

id:lovefukuyama

ありがとうございます。

2011/05/07 02:29:17
id:typista No.4

回答回数359ベストアンサー獲得回数7ここでベストアンサー

ポイント400pt

＜デモ＞

http://typista.xii.jp/test/googlemaps/list2map/index.html

http://typista.xii.jp/test/googlemaps/list2map/data.csv

＊index.htmlとdata.csvはUTF8で保存してください。

100数十行ほどのExcelのシートをCSV(カンマ区切り)でdata.csvとして保存し、同階層に下記のHTMLを用意すれば「住所」を緯度経度変換してピンを置き、「場所名」、「コメント」を噴出しに表示できるようにしました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
//  google.load("jquery", "1.6");
  google.load("jquery", "1.2.6");
</script>
<script type="text/javascript" src="http://plugins.jquery.com/files/jquery.csv.js_0.txt"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
<!--
var isLabel = false;
//var isLabel = true;
var indexStart = isLabel ? 1 : 0;
var geocoder = new google.maps.Geocoder();
var list = new Array();
var add;
function showAddress(addr, index) {
　geocoder.geocode(
　　{ address: addr },
　　function(result, status){
　　　if(status == "OK") {
		  list[index]['latlng'] = result[0].geometry.location;
		  list[index]['status'] = "OK";
　　　} else {
		  if ( index == 0 ) {
			isLabel = true;
		  }
		  return null;
      }
　　}
　);
}

function showLatLng(r){
　var i, res = "";
　for(i=0; i<r.length; i++) res += (res?"\n":"") + r[i].geometry.location;
  return res;
}
//-->
</script>
<script type="text/javascript">
$(function(){
	$.get('data.csv',function(data){
		var csv = $.csv()(data);
		var index = 0;
		$(csv).each(function(){
			if(this[0] && this[1] && this[2]){
				list[index] = new Array();
				list[index]['label'] = this[0];
				list[index]['address'] = this[1];
				list[index]['comment'] = this[2];
				list[index]['status'] = "";
				showAddress(this[1], index);
				index++;
			}
		})
		checkReadyIntervalID = setInterval( checkReady, 1000 );
	})
})

var checkReadyIntervalID = null;
function checkReady() {
	indexStart = isLabel ? 1 : 0;
	console.log( list.length );
	for ( var i = indexStart; i < list.length; i++ ) {
		if ( list[i]['status'] != "OK" ) {
			return;
		}
	}
	clearInterval( checkReadyIntervalID );
	checkReadyIntervalID = null;
	for ( var i = indexStart; i < list.length; i++ ) {
		var content = list[i]['label'] + "<br />" + list[i]['comment'];
		data.push({position: list[i]['latlng'], content: content});
	}
	attachMap();
}

function attachMessage(marker, msg) {
	google.maps.event.addListener(marker, 'click', function(event) {
		new google.maps.InfoWindow({
			content: msg
		}).open(marker.getMap(), marker);
	});
}

var data = new Array();

function attachMap() {
	var myMap = new google.maps.Map(document.getElementById('map'), {
		zoom: 14,
		center: list[indexStart]['latlng'],
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	var i;
	for (i = 0; i < data.length; i++) {
		var myMarker = new google.maps.Marker({
			position: data[i].position,
			map: myMap
		});
		attachMessage(myMarker, data[i].content);
	}
}
</script>
</head>
<body>
<div id='map' style='width:740px; height:400px;'><br></div>
</body>
</html>
id:lovefukuyama

素晴らしすぎます！

感動しました。

わずかですが多めにポイント配分させて頂きます。

2011/05/07 02:30:02

コメント（0件)

コメントはまだありません

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ