人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

[良回答300pt]Googleマップの使い方について。「場所名」、「住所」、「コメント」の3列をもつ100数十行ほどのExcel
のシートがあります。これを元にGoogleマップのページを作りたいのですが、お手軽な方法を教えてください。
住所の地点にポイントされ、クリックすると場所名とコメントが表示されるというイメージです。
Google Maps APIを使う場合はVer.3でお願いします。


●質問者: lovefukuyama
●カテゴリ:インターネット ウェブ制作
✍キーワード:Excel Google Maps API Googleマップ イメージ クリック
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● readmaster
●50ポイント

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

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...

◎質問者からの返答

ありがとうございます。


2 ● Lhankor_Mhy
●50ポイント

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

↓使い方

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

↓サンプル

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

◎質問者からの返答

ありがとうございます。


3 ● saijyoh_739
●50ポイント

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のサイトで色々な情報が公開されているので、資料が読めれば扱うのは難しいわけではないのですが。

◎質問者からの返答

ありがとうございます。


4 ● typista
●400ポイント ベストアンサー

<デモ>

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>
◎質問者からの返答

素晴らしすぎます!

感動しました。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ