Skip to content

Instantly share code, notes, and snippets.

@cherenkov

cherenkov/hateq20120607.html

Created June 7, 2012 09:05
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cherenkov/2887656 to your computer and use it in GitHub Desktop.
Save cherenkov/2887656 to your computer and use it in GitHub Desktop.
Download ZIP
GoogleMapsAPIで地図を作ってマーカーを立てています。http://wi.. - 人力検索はてな http://q.hatena.ne.jp/1339041535
Raw
hateq20120607.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Google Spreadsheet ⇒ Google Maps 反映</title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
</head>
<body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!--★★★-->
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("visualization", "1");
//★★★
var MCmarker = [];
function init(){
mapDrawing();
}
google.setOnLoadCallback(init);
////////////////////////////////////////
// マップ描画
////////////////////////////////////////
var mapDrawing = function(){
// 地図を描画
var map_opts = {};
map_opts.center = new google.maps.LatLng(43.062096, 141.354376);
map_opts.mapTypeId = google.maps.MapTypeId.ROADMAP;
map_opts.zoom = 8;
map_opts.panControl = true;
map_opts.zoomControl = true;
map_opts.scaleControl = true;
map_opts.streetViewControl = true;
map_opts.overviewMapControl = true;
map_opts.overviewMapControlOptions = { opened : true };
var map = new google.maps.Map($("#map")[0], map_opts);
// Google Visualization APIを使って Google Spreadsheetからデータ取得
var query_opts = {}
//北海道
query_opts.dataSource = "https://docs.google.com/spreadsheet/tq?key=0Aojk_zIECowMdHZHMzdIVmNmN2Zfc1hCeHRvTWJtWWc#gid=0";
// /spreadsheet/cccでも読み込める
// spreadsheet の共有設定を「限定公開」にするとIEとFireFOXでマーカーが立たなくなる
query_opts.sql = "select * ";
var query = new google.visualization.Query(query_opts.dataSource);
query.setQuery(query_opts.sql);
query.send(setMarker);
// Markerを追加
function setMarker(response){
if (response.isError()){
console.log(response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var rows = data.getNumberOfRows();
var cols = data.getNumberOfColumns();
for (var row = 1; row < rows; row++){
var mapinfo = {};
mapinfo.title = data.getFormattedValue(row,5);
mapinfo.descrption = data.getFormattedValue(row,7);
// mapinfo.address = data.getFormattedValue(row,2);
mapinfo.lat = data.getFormattedValue(row,1);
mapinfo.lng = data.getFormattedValue(row,0);
mapinfo.pubdate = data.getFormattedValue(row,3);
// mapinfo.fax = data.getFormattedValue(row,6);
mapinfo.mail = data.getFormattedValue(row,4);
mapinfo.url = data.getFormattedValue(row,6);
// mapinfo.infoprov = data.getFormattedValue(row,9);
createMarker(mapinfo);
}
//★★★
var markerCluster = new MarkerClusterer( map, MCmarker);
}
//////////////////////////////
// Marker作成
//////////////////////////////
var createMarker = function(mapInfo){
var marker_opts = {};
marker_opts.map = map ;
marker_opts.position = new google.maps.LatLng(mapInfo.lat, mapInfo.lng);
marker_opts.title = mapInfo.title ;
marker_opts.icon = "http://labs.google.com/ridefinder/images/mm_20_red.png";
marker_opts.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
marker_opts.animation = google.maps.Animation.DROP ;
var marker = new google.maps.Marker(marker_opts);
//★★★
MCmarker.push(marker);
google.maps.event.addListener(marker, 'rightclick', function(){
showInfoWindow(mapInfo, marker); });
//クリックされたらズームする処理を追加
google.maps.event.addListener(marker, 'click', function(){
// ズームを変更 参考 http://yasuda.iobb.net/wordpress/?p=6920
var myPosition = marker.getPosition();
// myPosition = marker.getPosition(); でもOK
map.setCenter(myPosition);
map.setZoom(17);
});
};
//////////////////////////////
// InfoWindowを表示
//////////////////////////////
var infoWindow, infoWindow_opts;
var showInfoWindow = function(mapInfo, marker){
var content = '';
//<div>で情報ウインドウの大きさを指定。参考/http://rnk.mitelog.jp/oyaji/2011/07/googlemap-api-v-5e49.html
content += '<div id="infowindowclass"><b>' + mapInfo.title + '</b><br>';
if (mapInfo.descrption) {
content += "!!&nbsp;&nbsp;" + mapInfo.descrption + '<br>';
}
content += mapInfo.address + '<br>';
if (mapInfo.pubdate) {
content += "登録日:" + mapInfo.pubdate + '<br>';
}
/*
if (mapInfo.pubdate && mapInfo.fax) {
content += "&nbsp;/&nbsp;";
}
if (mapInfo.fax) {
content += "Fax:" + mapInfo.fax ;
}
if (mapInfo.pubdate || mapInfo.fax) {
content += "<br>";
}
*/
if (mapInfo.mail) {
content += "[<a href='mailto:" + mapInfo.mail + "'>この情報の間違いを連絡する</a>]";
}
/*
if (mapInfo.mail && mapInfo.url) {
content += "&nbsp;";
}
*/
if (mapInfo.url) {
content += "[<a href='" + mapInfo.url + "' target='_blank'>参照元サイトを見る</a>]";
}
if (mapInfo.mail || mapInfo.url) {
content += "<br></div>";
}
/*
if (mapInfo.infoprov) {
content += "<div style='text-align:right;'>by " + mapInfo.infoprov + "</div>";
}
*/
if (infoWindow) { infoWindow.close(); }
infoWindow_opts = {}
infoWindow_opts.content = content ;
infoWindow_opts.disableAutoPan = true ;
infoWindow_opts.maxWidth = 400 ;
infoWindow = new google.maps.InfoWindow(infoWindow_opts);
map.setCenter(marker.getPosition());
infoWindow.open(map, marker);
};
}
////////////////////////////////////////
// HTMLエスケープ
////////////////////////////////////////
var escapeHtml = function(text){
return (text || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\u0022/g, '&quot;');
};
</script>
<div id="map" style="width:100%; height:500px;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment