朝 !
地図上に情報ウィンドウを開くように Google マップをセットアップしましたが、記事「infowin」で情報ウィンドウを開きたいのですが、情報を取得する方法を知っている人はいますか?サイドバー、ここで作業バージョンを見つけることができます
http://www.connectteesvalley.com/busdeparturessidetesting.asp
ありがとうございました
<!DOCTYPE html>
<html>
<head>
<!--Force IE standards mode-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
<!--HTML5 IE enabling script-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" type="text/css" href="styles/desktopcore.css" />
<link rel="stylesheet" type="text/css" href="styles/desktopbus.css" />
<![endif]-->
<!--<link rel="stylesheet" type="text/css" media="(min-width: 551px) and (max-width: 870px)" href="styles/tabletbus.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<!--http://www.google.com/webfonts#ChoosePlace:select Example of Web Font Link-->
<!--<link rel="stylesheet" type="text/css" href="styles/mobilecore.css" media="(min-device-width: 0px) and (max-device-width: 764px)"/>
<link rel="stylesheet" type="text/css" href="styles/mobilebus.css" media="(min-device-width: 0px) and (max-device-width: 764px)"/> -->
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" href="styles/desktopcore.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" href="styles/desktopbus.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="styles/mobilecore.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="styles/mobilebus.css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<!--Jquery core-->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="gmap_funcs.js"></script>
<script type="text/javascript" src="gmap_funcsv3.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false®ion=GB"></script>
<script type="text/javascript" src="gmap_jscoord-1.1.1.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
<!--//
var userQry = '<%=Request("stopname")%>';
var rtSearchType = ""
function initPg(){
<%if LCase(Request("auto")) = "1" then%>
if (userQry.length <= 3){
getStopsGoByRoute(userQry);
} else {
getStopsGoByTxt(userQry);
document.getElementById('stoptxtquery').value = '<%=Request("stopname")%>';
}
<%end if%>
showMap();
}
var mapOpened = false;
var map;
var currMarker;
var geoCoder;
var startPt;
function showMap() {
var mapObj = document.getElementById('map-canvas');
mapObj.style.display = 'block';
document.getElementById('rt-results').style.display = 'none';
geoCoder = new google.maps.Geocoder();
startPt = new google.maps.LatLng(54.57019583004256,-1.3190460205078125);
var myOptions = {
zoom: 10,
center: startPt,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
map = new google.maps.Map(mapObj, myOptions);
google.maps.event.addListener(map, 'click', function(res){
en = LatLonWGS842OS_func(res.latLng.lat(), res.latLng.lng());
getStopsGoByCoord(parseInt(en.easting), parseInt(en.northing));
/*infowindow = new google.maps.InfoWindow({
content:"<div class='infowin'><div class='inner'><h3>aaaa</h3></div></div>",
position:startPt,
pixelOffset:new google.maps.Size(0,33)
});
infowindow.open(map)
infowindow.setContent("OOOO<br />aaaddad")*/
});
}
function resetMap(){
map.setCenter(startPt);
map.setZoom(10);
gmapDeleteOverlays();
deleteMarkers();
if (infowindow != undefined){
infowindow.close();
}
document.getElementById('foundstops').style.display="none";
}
function getStopsGoByTxt(qry){
document.getElementById('rt-results').style.display = 'none';
document.getElementById('fbloader').style.display="inline";
sendXmlHttpRequestGet("datanew/nextbuses/findstops.asp?stype=bytxt&qry="+qry,function(res){
//alert(res)
eval("stopsJson="+res);
rtSearchType = "text";
foundStops();
},"");
}
function getStopsGoByCoord(e,n){
document.getElementById('rt-results').style.display = 'none';
var ll = OS2LatLonWGS84_func(e, n);
ll = new google.maps.LatLng(ll.lat, ll.lng);
currMarker = gmapAddMarker({position: ll,title:'',map:map, icon:'images/arrow.png'});
document.getElementById('fbloader').style.display="inline";
sendXmlHttpRequestGet("datanew/nextbuses/findstops.asp?stype=bycoords&e="+e+"&n="+n,function(res){
//alert(res)
eval("stopsJson="+res);
rtSearchType = "map";
foundStops();
},"");
}
function gmapGeoCode(qry) {
geoCodeAddr(geoCoder,{'address':qry+", UK", 'region':"UK"}, gmapGeoCodeResults)
}
function gmapGeoCodeResults(res) {
en = LatLonWGS842OS_func(res.lat(), res.lng());
getStopsGoByCoord(en.easting,en.northing);
}
function selectAddress(addr,e,n){
getStopsGoByCoord(e,n);
document.getElementById('stoptxtquery').value = addr;
}
var stopsJson;
var stopMarkers = [];
function foundStops(){
document.getElementById('rt-results').innerHTML = "";
document.getElementById('rt-results').style.display = 'block';
document.getElementById('fbloader').style.display="none";
var selObj = document.getElementById('foundstops');
var ll;
selObj.style.display="block";
selObj.length = 0;
appendToSelectObj(selObj, " --- Select a stop --- ", "");
gmapDeleteOverlays();
deleteMarkers();
stopMarkers = [];
stopsTotal = 0;
if (stopsJson.stops.length < 1){
gmapGeoCode(document.getElementById("stoptxtquery").value);
}
var bounds = new google.maps.LatLngBounds();
for (i=0;i<stopsJson.stops.length;i++){
if (stopsJson.stops[i].town != ""){
stopsJson.stops[i].town = ", "+stopsJson.stops[i].town;
}
//stopsJson.stops[i].name = stopsJson.stops[i].name+", "+stopsJson.stops[i].dir+stopsJson.stops[i].town+" ("+stopsJson.stops[i].sms+")";
appendToSelectObj(selObj,stopsJson.stops[i].name , i);
ll = OS2LatLonWGS84_func(stopsJson.stops[i].e, stopsJson.stops[i].n);
ll = new google.maps.LatLng(ll.lat, ll.lng);
bounds.extend(ll);
map.fitBounds(bounds);
if (browserIE) {
marker = gmapAddMarker({position: ll, map:map, title:stopsJson.stops[i].name});
} else {
marker = gmapAddMarker({position: ll, map:map, title:stopsJson.stops[i].name, icon:'images/new/marker-bus.png'});
}
marker.atco = stopsJson.stops[i].atco;
marker.i = i;
stopMarkers.push(marker);
google.maps.event.addListener(marker, 'click', function(res){
selectStop(this.i, this.title)
});
stopsTotal++;
}
if (selObj.length > 1){
jqueryOrderSelectOpts("foundstops");
selObj[0].text = "--- Select a stop ("+stopsTotal+" stops found) ---"
if (stopsTotal <= 2){
selObj.selectedIndex = 1;
selectStop(stopMarkers[0].i, stopMarkers[0].title)
}
}
if (stopsTotal <= 0){
selObj.style.display="none";
document.getElementById('rt-results').innerHTML = '<div class="warning">No stop was found please select refine your search or select a point on the map</div>';
}
if (map.getZoom() > 15){
map.setZoom(15);
}
}
function deleteMarkers(){
for (i=0;i<stopMarkers.length;i++){
stopMarkers[i].setMap(null);
}
stopMarkers = [];
}
var infowindow;
var selectedI;
function selectStop(indexI, stopName){
selectedI = indexI
//alert(indexI+" ----- "+stopName+"\n"+stopsJson.stops[indexI].name)
var stopName = stopsJson.stops[indexI].name;
var smsCode = stopsJson.stops[indexI].sms;
$('#foundstops').val(indexI);
var mkr = null;
for (i=0;i<stopMarkers.length;i++){
if (stopMarkers[i].i == indexI){
mkr = stopMarkers[i]
}
}
if (infowindow != undefined){
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: "<div class='infowin'><div class='inner'><h3>"+stopName+" </h3><div id='infowin-rtloader' class='realtimeresults'><img src='images/ajax-loader-facebook.gif' /> loading...</div></div></div>",
pixelOffset:new google.maps.Size(0,33)
});
if (mkr != null){
infowindow.open(map,mkr);
getNextBuses(stopsJson.stops[indexI].name, stopsJson.stops[indexI].atco, "", "", "infowin-rtresults", "infowin-rtloader", true);
}
}
var nextbusesNum = 5;
function searchKeyPress(e, func, params){
// look for window.event in case event isn't passed in
if (window.event) { e = window.event; }
if (e.keyCode == 13){
func(params);
return false; // disables submitting form, must have "return searchKeyPress" on the keypress event in textbox
}
}
//-->
</script>
<script type="text/javascript">
<!--//
// Hover navigation images for page:
var navImgHoverArr = ['images/button__myjourney.jpg','images/button__bus.jpg','images/button__rail.jpg','images/button__walk.jpg','images/button__cycle.jpg','images/button__air.jpg','images/button__drive.jpg','images/button__taxi.jpg'];
//-->
</script>
<title>Connect Tees Valley - Live Bus Information</title>
<!--Google Analytics Tracking Snippet - 15 November 2012-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11278574-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body onload="initNav();initPg()" class="realtime">
<section id="allContent">
<header id="topHeader">
<div id="headerContent">
<a href="default.asp" accesskey="0"><div id="connectLogo"></div></a>
<h1>Tees Valley Live Bus Information</h1>
<a href="bus.asp"><div id="connectModeLogo"></div></a>
</div>
</header>
<div id="modeBand"></div>
<section id="mainSection">
<h2>To get departure information from any bus stop in the Tees Valley area<br />please either search for a stop by text search or select a point on the map.</h2>
<article id="busLive">
<input type="text" name="stoptxtquery" id="stoptxtquery" style="width:auto" class="txtgray" onkeyup="searchKeyPress(event, getStopsGoByTxt, document.getElementById('stoptxtquery').value)" value="Stop name, street name, postcode or SMS code" onclick="javascript:if (this.value == 'Stop name, street name, postcode or SMS code'){this.value=''}" />
<input type="submit" id="realSearch" aclass="but" value="Search" align="absmiddle" onclick="getStopsGoByTxt(document.getElementById('stoptxtquery').value)" />
<a href="" id="realReset" onclick="resetMap();return false">reset</a>
<!--//<label> or </label>
<input type="button" class="but" value="Show map" onclick="showMap()" />//-->
<img src="images/ajax-loader-facebook.gif" id="fbloader" style="display:none" />
<select name="foundstops" id="foundstops" style="display:none" onchange="selectStop(this.value, $('#foundstops option:selected').text())"></select>
<div id="map-canvas" ></div>
<div id="rt-results"></div>
</article>
<article id="infowin">
</article>
</section>
<!--Close Main Section-->
<!--Document Footer-->
<div id="modeBand"></div>
<section id="journeyPlanner">
<form id="jpform" method="post" action="http://www.connectteesvalley.com/jplanner1.asp">
<h2><a href="jplanner1.asp">Connect Journey Planner</a></h2>
<input type="text" id="jpFrom" name="addrfrom" placeholder="I'm leaving from..." tabindex="1"/>
<input type="text" id="jpTo" name="addrto" placeholder="I'm travelling to..." tabindex="2"/>
<input type="submit" id="jpGo" value="Go" tabindex="3"/>
<br class="clearboth" />
</form>
</section>
<section id="homeSection">
<nav id="mainNavigation">
<ul>
<li id="busButton"><a href="bus.asp" accesskey="2">Bus</a></li>
<li id="trainButton"><a href="train.asp" accesskey="3">Train</a></li>
<li id="walkButton"><a href="walk.asp" accesskey="4">Walk</a></li>
<li id="cycleButton"><a href="cycle.asp" accesskey="5">Cycle</a></li>
<li id="driveButton"><a href="drive.asp" accesskey="6">Drive</a></li>
<li id="flyButton"><a href="fly.asp" accesskey="7">Fly</a></li>
<li id="taxiButton"><a href="taxi.asp" accesskey="8">Taxi</a></li>
</ul>
</nav>
</section>
<section id="socialSection">
<a href="http://www.youtube.com/user/connectteesvalley"><div id="youtubeLogo"></div></a>
<a href="https://twitter.com/connect_tv"><div id="twitterLogo"></div></a>
<a href="http://www.facebook.com/connectteesvalley"><div id="facebookLogo"></div></a>
<h3>Let's journey together</h3>
</section>
<div class="homeBand"></div>
</section>
</body>
</html>