スポンサードリンク

Google Maps API v3 + 外部XMLファイル + サイドバー（sidebar）の復習

Posted by 管理人 on 2012年10月31日 Leave a comment (6) Go to comments

「Google Maps API v3 + サイドバー(sidebar, marker list)をクリックしてインフォウィンドウ（infowindow）を表示させる」の記事が良くわからないとのコメントを頂いたので再度ポイントを復習してみます。

 

 

①この地図は、外部に用意したxmlファイルからデータを引っ張ってアイコンを表示させるもの。ただし、xmlファイル「http://waox.main.jp/news/maps/googlemapsapi/example/kouen-demo.php」は、MySQL+phpで作成しているのでデータベースを利用していない場合には、テキストエディタで作成すれば良し。gmarker.xmlというファイル名にしてあります。サンプルは、コチラ「ｘｍｌファイルサンプル」。

②続いてdownloadxml.js の最新ファイルは、http://code.google.com/p/frisaporceddhu/source/browse/trunk/js/?r=44にあります。downloadxml.jsをダウンロードしてご自分のサーバにアップ

③最後に上記①のxmlファイル「http://waox.main.jp/news/maps/googlemapsapi/example/gmarker.xml」をご自分のPCに保存後、自分のサーバにアップロード。その後、下記の赤字の部分だけを自分のサーバURLに書き換えればOKです。これで動くはずですが・・・・。

＜ソース＞

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>TEST</title> 
<!--ここからGoogle Maps v3用-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://waox.main.jp/maps/js/downloadxml.js"></script>//② 
<script type="text/javascript">
//<![CDATA[
var markers = [];
var sidebarhtml = '';

function initialize() 
	{
		var map = new google.maps.Map(document.getElementById("map_canvas"), 
		{
		center: new google.maps.LatLng(35.67849, 139.39178),
		zoom: 10,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		});
 
		downloadUrl("http://waox.main.jp/news/maps/googlemapsapi/example/gmarker.xml", function(data)//③
		{
		var xmlDoc = xmlParse(data);
		var markers = xmlDoc.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++)
			{
			var point = new google.maps.LatLng(
			parseFloat(markers[i].getAttribute("lat")),
			parseFloat(markers[i].getAttribute("lng")));
			var name = markers[i].getAttribute("name");
			var category = markers[i].getAttribute("category");
			var mapall = markers[i].getAttribute("mapall");
			var html = '<div style="height: 150px; width: 200px"><b>'+name+'</b><br>'+mapall+'</b>'  ;
			sidebarhtml += '<table border="1" cellspacing="2" cellpadding="2" id="HPB_TABLE_2_A_101114020233" class="hpb-cnt-tb1"> \
                                  <thead> \
                                  <tr> \
                                  <td class="hpb-cnt-tb-cell2" width="220"><a href="javascript:myclick(' + i + ')">' + name + '</a></td> \
                                  </tr> \
                                  </thead> \
                                  <tbody>';
			createMarker(point,html,map,category,name);
			}
			document.getElementById("side_bar").innerHTML = sidebarhtml;
		});

	}

function createMarker(point,html,map,category,name)
	{
		var customIcons = 
		{
     　　　　　 	kouen: 
			{
			icon: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
			shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png'
			},
			onsen: 
			{
			icon: 'http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png',
			shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.shadow.png'
			},      
			doubutsu: 
			{
			icon: 'http://maps.google.co.jp/mapfiles/ms/icons/horsebackriding.png',
			shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/horsebackriding.shadow.png'
			}
		};
		var icon = customIcons[category] || {};
		var marker = new google.maps.Marker(
		{
		map: map,
		position: point,
		icon: icon.icon,
		shadow: icon.shadow,
		title: name
		});

		markers.push(marker);
		google.maps.event.addListener(marker, 'click', function() 
		{
		infoWindow.close();
		infoWindow.setContent(html);
		infoWindow.open(map,marker); 
		map.panTo(point);
		});
	} 
	var infoWindow = new google.maps.InfoWindow();


function myclick(num) 
	{
	google.maps.event.trigger(markers[num], "click");
	}

window.onload=initialize;

//]]>
</script>
</head>
<body> 
<div id="maincontainer">
<div id="map_canvas" align="left" style="font-size : 12px;vertical-align : 50%;text-align : left;width : 673px;height : 650px;float : left;"></div>
<div id="side_bar" style="font-size : 12px;width : 250px;height : 635px;overflow : scroll;"></div>
</div>
</body>
</html>

 

＜上記のコピペ用＞

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>TEST</title> 
<!--ここからGoogle Maps v3用-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://frisaporceddhu.googlecode.com/svn-history/r44/trunk/js/downloadxml.js"></script> 
<script type="text/javascript">
//<![CDATA[
var markers = [];
var sidebarhtml = '';

function initialize() 
	{
		var map = new google.maps.Map(document.getElementById("map_canvas"), 
		{
		center: new google.maps.LatLng(35.67849, 139.39178),
		zoom: 10,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		});
 
		downloadUrl("http://waox.main.jp/news/maps/googlemapsapi/example/gmarker.xml", function(data)
		{
		var xmlDoc = xmlParse(data);
		var markers = xmlDoc.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++)
			{
			var point = new google.maps.LatLng(
			parseFloat(markers[i].getAttribute("lat")),
			parseFloat(markers[i].getAttribute("lng")));
			var name = markers[i].getAttribute("name");
			var category = markers[i].getAttribute("category");
			var mapall = markers[i].getAttribute("mapall");
			var html = '<div style="height: 150px; width: 200px"><b>'+name+'</b><br>'+mapall+'</b>'  ;
			sidebarhtml += '<table border="1" cellspacing="2" cellpadding="2" id="HPB_TABLE_2_A_101114020233" class="hpb-cnt-tb1"> \
                                  <thead> \
                                  <tr> \
                                  <td class="hpb-cnt-tb-cell2" width="220"><a href="javascript:myclick(' + i + ')">' + name + '</a></td> \
                                  </tr> \
                                  </thead> \
                                  <tbody>';
			createMarker(point,html,map,category,name);
			}
			document.getElementById("side_bar").innerHTML = sidebarhtml;
		});

	}

function createMarker(point,html,map,category,name)
	{
		var customIcons = 
		{
     　　　　　 	kouen: 
			{
			icon: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
			shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png'
			},
			onsen: 
			{
			icon: 'http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png',
			shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.shadow.png'
			},      
			doubutsu: 
			{
			icon: 'http://maps.google.co.jp/mapfiles/ms/icons/horsebackriding.png',
			shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/horsebackriding.shadow.png'
			}
		};
		var icon = customIcons[category] || {};
		var marker = new google.maps.Marker(
		{
		map: map,
		position: point,
		icon: icon.icon,
		shadow: icon.shadow,
		title: name
		});

		markers.push(marker);
		google.maps.event.addListener(marker, 'click', function() 
		{
		infoWindow.close();
		infoWindow.setContent(html);
		infoWindow.open(map,marker); 
		map.panTo(point);
		});
	} 
	var infoWindow = new google.maps.InfoWindow();


function myclick(num) 
	{
	google.maps.event.trigger(markers[num], "click");
	}

window.onload=initialize;

//]]>
</script>
</head>
<body> 
<div id="maincontainer">
<div id="map_canvas" align="left" style="font-size : 12px;vertical-align : 50%;text-align : left;width : 673px;height : 650px;float : left;"></div>
<div id="side_bar" style="font-size : 12px;width : 250px;height : 635px;overflow : scroll;"></div>
</div>
</body>
</html>

 

＜デモサンプル＞
http://waox.main.jp/news/maps/v3/example/map-xml-demo-sidebar2aa.html

 

なお、外部XMLファイルでなく内部ソースにマーカー用の配列を記述する場合はコチラの記事を参照下さい。

 

関連記事一覧

スポンサードリンク

関連記事一覧

  1. Google Maps API v3 + サイドバー(sidebar, marker list)をクリックしてインフォウィンドウ（infowindow）を表示させる
  2. マーカー（アイコン）の種類、画像、サイズ、位置、影を変更する／Google Maps API V3 （new google.maps.Marker / new google.maps.MarkerImage)
  3. PHP+MySQL（XMLファイル生成）+Google Maps API V3／地図表示サンプル
  4. ズームレベルに連動しマーカー収得用の半径距離（km）を自動変更して、地図のアイコン表示範囲内（Viewport）に合わせてみる＋サイドバー
  5. マーカーのアイコン種類を変更する＋影指定／Google Maps JavaScript API V3
Related Posts
Google, Google Maps API v3, Google Maps v3 XMLファイル, サイドバー（sidebar）, , ,
  1. akkun 2012年10月31日 8:53 PM

    とっても分かりやすいページを作っていただきまして、
    本当にありがとうございます！！

    できました！　本当にありがとうございます！心から感謝しております！
    これからオリジナルのマップを作りたいと思います！！

  2. kentaro 2012年11月23日 3:11 AM

    どうも、wordpressの固定ページで作成した場合だけ、起こるようです。
    全く同じhtmlで試したところ判明しました。

  3. mojax 2013年1月18日 1:07 AM

    外部のXMLが下記のような場合は

    #e
    襟裳岬
    2012-12-05T10:12:57+09:00
    admin

    日本北海道幌泉郡えりも町東洋 襟裳岬「風の館」

    143.244706,41.925934

    どのように読み込んだらよろしいでしょうか。
    基礎的な知識がなくいろいろ調べましたがお手上げです

  4. mojax 2013年1月18日 1:09 AM

    すみません。
    このようなかたちです↓

    ＜Placemark id=”marker-1″＞
    ＜styleUrl＞#e＜/styleUrl＞
    ＜name＞襟裳岬＜/name＞
    ＜TimeStamp＞＜when＞2012-12-05T10:12:57+09:00＜/when＞＜/TimeStamp＞
    ＜atom:author＞＜atom:name＞admin＜/atom:name＞＜/atom:author＞
    ＜atom:link href=”http://ezotic.info” /＞
    ＜description＞＜![CDATA[襟裳岬]]＞＜/description＞
    ＜address＞日本北海道幌泉郡えりも町東洋 襟裳岬「風の館」＜/address＞
    ＜Point＞
    ＜coordinates＞143.244706,41.925934＜/coordinates＞
    ＜/Point＞
    ＜/Placemark＞

  5. 管理人 2013年1月20日 4:06 PM

    @mojaxさん

    これは、kmlというデータでは？。最近はGPS内臓の機器から取り出せるようになっているようです。ご希望の回答かわかりませんが、先ずはGoogle先生の「kmlチュートリアル」と「リファレンス」のページを先ずは参照されてみてはいかがでしょう。

    なお、外部のkmlファイルを使った参考記事は、コチラとコチラ。　「google maps API v3 kml files」でインターネットを検索されるとたくさん出てきますよ。

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">