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

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

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/05/01 01:07:18
  • 終了:2011/05/07 02:30:16

ベストアンサー

id:typista No.4

typista回答回数359ベストアンサー獲得回数72011/05/06 13:28:16

ポイント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:Lhankor_Mhy No.2

Lhankor_Mhy回答回数775ベストアンサー獲得回数2302011/05/01 12:23:36

ポイント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

saijyoh_739回答回数113ベストアンサー獲得回数102011/05/03 00:08:03

ポイント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

typista回答回数359ベストアンサー獲得回数72011/05/06 13:28:16ここでベストアンサー

ポイント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

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません