E-PARLOR : Document

HomePage :: Blog∞ :: Gallery∞ :: Library∞ :: Forum∞ :: Categories :: Index
Home | Labs | Admin | Welcome |
Document
googlemap
 
トレース: » skype » start » mynets » youtube » openpne » googlemap
目次

Googlemap・ランキング表示

公式サイト

ランキング表示機能

  • 地図上に地域属性を持つ各種ランキング情報をマーキング表示する。
  • 各種実装方法がありますが比較的簡単な方法です。独自機能の実装などにも向いていると思います。
  • 簡単な動作見本です。

関係するファイル

  • googleアカウント取得
  • ep_ranking_map.php (参考例です)
  • ep_week_ranking.xml (表示用データサンプルです)
  • 表示用アイコン １位、２位、３位、４位以降、影用　（テスト用です）
  • :picon_1.png:picon_2.png:picon_3.png:picon.png:picon_kage.png

表示例

通常表示[ランキング]

:googlemap_sample.jpg

構造

アイコンの表示構造

:googlemap_sample2.jpg

表示プログラム

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<script src="http://maps.google.com/maps?file=api&v=1&key=ここにAPI Keyコードをいれます" type="text/javascript" charset="utf-8"></script>
<TITLE>E-PARLOR：GoogleMap</TITLE>
<META http-equiv=Content-Type content="text/html; charset=euc-jp">
<META http-equiv=Content-Style-Type content=text/css>
<META content="MSHTML 6.00.2800.1400" name=GENERATOR>
<style type="text/css">
<!--
body { 
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	background-color:#ffffff;
}
-->
</style>
</HEAD>
<BODY link="#0000ff" vlink="#0000cc" alink="#000099">
 
<CENTER>
 
<!-- 全体コンテンツ -->
 
<div id="map" style="width: 600px; height: 600px" align="center"></div> 
<div id="message"><br>
  <br>
  <br>
  <br>
  <br>          
</div>
 
 
<!-- 全体コンテンツ　終了 -->
</CENTER>
 
<script type="text/javascript">
//
// Create our "tiny" marker icon
var icons = new GIcon();
 
icons.shadow = "http://e-parlor.org/blog/images/picon_kage.png";
icons.iconSize = new GSize(17, 20);
icons.shadowSize = new GSize(17, 20);
icons.iconAnchor = new GPoint(6, 20);
icons.infoWindowAnchor = new GPoint(5, 1);
//
// Center the map on Palo Alto
    var map = new GMap(document.getElementById("map"));
//    map.addControl(new GSmallMapControl());
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    var r_point = new GPoint(130.399426, 33.591973);
GEvent.addListener(map, "moveend", function() {
  var center = map.getCenterLatLng();
  var latLngStr = '[緯度:' + center.y + ' 経度: ' + center.x + ']';
  document.getElementById("message").innerHTML = latLngStr;
});
    map.centerAndZoom(new GPoint(137.021484375, 36.66841891894786),12);
//
var request = GXmlHttp.create();
request.open("GET", "http://e-parlor.org/blog/ep-week_rankingMap.xml", true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    var xmlDoc = request.responseXML;
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var rank  = markers[19-i].getElementsByTagName("rank")[0].firstChild.nodeValue;
      var pdai  = markers[19-i].getElementsByTagName("pdai")[0].firstChild.nodeValue;
      var pball = markers[19-i].getElementsByTagName("pball")[0].firstChild.nodeValue;
      var description = markers[19-i].getElementsByTagName("description")[0].firstChild.nodeValue;
//
      var marker = createMarker(new GPoint(
        parseFloat(markers[19-i].getAttribute("lng")),
        parseFloat(markers[19-i].getAttribute("lat"))
      ), i+1, rank-1, pdai, pball, description);
      map.addOverlay(marker);
    }
  }
}
request.send(null);
 
// Creates a marker whose info window displays the letter corresponding to
// the given index
function createMarker(point, index, rank, pdai, pball, description) {
  // Create a lettered icon for this point using our icon class from above
 
	var icon = new GIcon(icons);
 
	if (rank < 4) {
		icons.image = "http://e-parlor.org/blog/images/picon_" + rank + ".png";
		icons.shadow = "http://e-parlor.org/blog/images/picon_kage.png";
	} else {
		icons.image = "http://e-parlor.org/blog/images/picon.png";
		icons.shadow = "http://e-parlor.org/blog/images/piconk.png";
	}
	
	
  var marker = new GMarker(point, icon);
 
  // Show this marker's index in the info window when it is clicked
  var html = "<h3>第 " + (rank+1) + " 位 " + description + "</h3>" + pdai + "番台 " + pball + "玉";
 
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}
 
 
function createMarker2(point, rank) {
  // Create a lettered icon for this point using our icon class from above
  var letter = String.fromCharCode("A".charCodeAt(0) + rank);
  var icon = new GIcon(icons);
  icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
  var marker = new GMarker(point, icon);
 
  // Show this marker's index in the info window when it is clicked
  var html = "Marker <b>" + letter + "</b>";
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
 
  return marker;
}
 
 
</script>
 
</body>
</html>
 

外部ランキング情報ファイル

ep_week_ranking.xml

  • サンプルとして、パチンコゲーム・ランキングデータを読み込んで表示してます。
<?xml version="1.0" encoding="utf-8" ?>
<markers>
  <marker lng="137.000518" lat="35.083426">
    <rank>1</rank>
    <pdai>371</pdai>
    <pball>87827</pball>
    <description>omamiyuma</description>
  </marker>
  <marker lng="136.909797" lat="35.485928">
    <rank>2</rank>
    <pdai>287</pdai>
    <pball>83281</pball>
    <description>sam99</description>
  </marker>
  <marker lng="140.286963" lat="39.706822">
    <rank>3</rank>
    <pdai>373</pdai>
    <pball>69825</pball>
    <description>takashiro</description>
  </marker>
  <marker lng="139.561305" lat="35.944248">
    <rank>4</rank>
    <pdai>331</pdai>
    <pball>68088</pball>
    <description>？？？</description>
  </marker>
  <marker lng="138.324416" lat="34.917013">
    <rank>5</rank>
    <pdai>332</pdai>
    <pball>65453</pball>
    <description>ダテ</description>
  </marker>
  <marker lng="140.150451" lat="38.428253">
    <rank>6</rank>
    <pdai>372</pdai>
    <pball>60790</pball>
    <description>やまとpeace２</description>
  </marker>
  <marker lng="139.649708" lat="35.68537">
    <rank>7</rank>
    <pdai>372</pdai>
    <pball>53977</pball>
    <description>MASAKICHI</description>
  </marker>
  <marker lng="130.501634" lat="31.436708">
    <rank>8</rank>
    <pdai>323</pdai>
    <pball>52352</pball>
    <description>fzs1000th</description>
  </marker>
  <marker lng="138.324416" lat="34.917013">
    <rank>9</rank>
    <pdai>181</pdai>
    <pball>49306</pball>
    <description>ひおひおっす★</description>
  </marker>
  <marker lng="135.536297" lat="34.665751">
    <rank>10</rank>
    <pdai>322</pdai>
    <pball>47555</pball>
    <description>サリリのママ</description>
  </marker>
  <marker lng="139.649708" lat="35.68537">
    <rank>11</rank>
    <pdai>362</pdai>
    <pball>47533</pball>
    <description>電気屋</description>
  </marker>
  <marker lng="139.649708" lat="35.68537">
    <rank>12</rank>
    <pdai>332</pdai>
    <pball>45312</pball>
    <description>？？？</description>
  </marker>
  <marker lng="137.000518" lat="35.083426">
    <rank>13</rank>
    <pdai>351</pdai>
    <pball>41440</pball>
    <description>みふぁっち</description>
  </marker>
  <marker lng="139.649708" lat="35.68537">
    <rank>14</rank>
    <pdai>332</pdai>
    <pball>41014</pball>
    <description>まいど！ツナ</description>
  </marker>
  <marker lng="131.361952" lat="32.026617">
    <rank>15</rank>
    <pdai>61</pdai>
    <pball>36883</pball>
    <description>日の丸</description>
  </marker>
  <marker lng="141.827971" lat="43.015628">
    <rank>16</rank>
    <pdai>331</pdai>
    <pball>34066</pball>
    <description>じゅん＿じゅん</description>
  </marker>
  <marker lng="136.07463" lat="35.109522">
    <rank>17</rank>
    <pdai>311</pdai>
    <pball>33302</pball>
    <description>ヘイドー</description>
  </marker>
  <marker lng="141.827971" lat="43.015628">
    <rank>18</rank>
    <pdai>373</pdai>
    <pball>29279</pball>
    <description>酒飲み</description>
  </marker>
  <marker lng="137.000518" lat="35.083426">
    <rank>19</rank>
    <pdai>371</pdai>
    <pball>28407</pball>
    <description>hiroshi39</description>
  </marker>
  <marker lng="139.502081" lat="35.430471">
    <rank>20</rank>
    <pdai>371</pdai>
    <pball>27555</pball>
    <description>べるぐ銀次郎</description>
  </marker>
</markers>

応用例

  • 独自のランキング情報ファイルを利用し、読込部分を改造することにより応用可能です。
 
googlemap.txt · 最終更新: 2006/10/05 01:22 by admin
 
Recent changes RSS feed Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki