0

朝 !

地図上に情報ウィンドウを開くように 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&region=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>

        &nbsp;
        </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>
4

1 に答える 1