Morning , hoping someone can help. I have a google map set up that opens up train times in an info window on the marker on the map. that works fine , i just need that info window to not open in the map but in a separate tag. code is as follows
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,400,600,800' rel='stylesheet' type='text/css'>
<!--Force IE standards mode-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
<link rel="stylesheet" type="text/css" media="(min-width: 0px)" href="styles/desktopcore.css" />
<link rel="stylesheet" type="text/css" media="(min-width: 0px)" href="styles/desktoptrain.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 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>
/*FORCE IE to see placeholder attribute within an INPUT element*/
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$(':text.hasPlaceholder').val('');
});
}
});
</script>
<title>Connect Tees Valley - Live Train Information</title>
<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="stations.js"></script>
<script id="api" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAN6152UgwT1SZB77BnJFoIRQnpdVsAwV_3Y4Ls0Av3kK1zTyTjBRRnBT3FSsVW5r9XsYVmbKrObSkbg" type="text/javascript"></script>
<script src="gmap_jscoord-1.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
<!--//
var container;
var map;
var marker;
function initMap(){
container = document.getElementById("map_canvas");
map = new GMap2(container);
map.setCenter(new GLatLng(54.57019583004256,-1.3190460205078125), 9);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
updateMapControls();
}
function updateControls(){
var images = map.getContainer().getElementsByTagName("img");
for(var i=0; i<images.length; i++){
images[i].src = images[i].src.replace(/mapcontrols2/,"mapcontrols3d");
}
}
function getRailStation(stationIndex){
var pt = OS2LatLonWGS84_func(stationListArr[stationIndex].east,stationListArr[stationIndex].north)
pt = new GLatLng(pt.lat, pt.lng)
map.setCenter(pt, 14);
marker = createrMarker_func(pt,'');
map.addOverlay(marker);
marker.stationIndex = stationIndex;
ajaxLoadLiveRailInfo(stationListArr[stationIndex].code) ;
}
var railwayMarker;
function createrMarker_func(latlngPt,iconSrc){
var marker = new GMarker(latlngPt, {draggable: false});
if (railwayMarker != undefined){
railwayMarker.remove();
}
railwayMarker = marker;
return marker;
}
//-->
</script>
<script type="text/javascript">
<!--//
function ajaxLoadLiveRailInfo(stationCode){
if (stationCode != ""){
var arrdep = "departures";
sendXmlHttpRequestGet("nationalrailwebservice/?stationcode="+stationCode+"&arrdep="+arrdep+"&showplat=0",ajaxLoadLiveRailInfoRes,"",null);
}
}
function ajaxLoadLiveRailInfoRes(res){
var stationIndex = marker.stationIndex;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<div class='mapbubbletitle'>"+stationListArr[stationIndex].name+" Station</div><div class='raillivefeed'>"+res+"</div><div class='clear'></div><div class='mapbubblebody'><img src='images/poweredbynr.gif' alt='Railway Station' title='National Rail'><br /><a href='http://nationalrail.co.uk/stations/"+stationListArr[stationIndex].code+"/details.html' target='_blank'>More information on "+stationListArr[stationIndex].name+" Station </a><br />Plan a local journey <a href=\"javascript:gotoJPlanner('"+stationListArr[stationIndex].name+" rail station','')\">from</a> / <a href=\"javascript:gotoJPlanner('','"+stationListArr[stationIndex].name+" rail station')\">to</a> "+stationListArr[stationIndex].name+" Station<br /><a href='http://www.nationalrail.co.uk/times_fares/' target='_blank'>Fare and timetable information</a></div>");
});
marker.openInfoWindowHtml("<div class='mapbubbletitle'>"+stationListArr[stationIndex].name+" Station</div><div class='raillivefeed'>"+res+"</div><div class='clear'></div><div class='mapbubblebody'><img src='images/poweredbynr.gif' alt='Railway Station' title='National Rail'><br /><a href='http://nationalrail.co.uk/stations/"+stationListArr[stationIndex].code+"/details.html' target='_blank'>More information on "+stationListArr[stationIndex].name+" Station </a><br />Plan a local journey <a href=\"javascript:gotoJPlanner('"+stationListArr[stationIndex].name+" rail station','')\">from</a> / <a href=\"javascript:gotoJPlanner('','"+stationListArr[stationIndex].name+" rail station')\">to</a> "+stationListArr[stationIndex].name+" Station<br /><a href='http://www.nationalrail.co.uk/times_fares/' target='_blank'>Fare and timetable information</a></div>");
}
</script>
<script type="text/javascript">
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>
<!--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();initMap()" class="pgrail">
<section id="mainSection">
<h2>To get live departure information from any station<br />
select from the drop-down list below.</h2>
<article id="trainLive">
<select name="stationlist" id="stationlist" onChange="getRailStation(this.value)" class="inputtxt">
<option>***Please select station***</option>
<option value="0">Allens West</option>
<option value="1">Battersby</option>
<option value="2">Billingham</option>
<option value="3">Bishop Auckland</option>
<option value="4">Castleton Moor</option>
<option value="5">Chester-le-Street</option>
<option value="6">Commondale</option>
<option value="22">Longbeck</option>
</select>
<div id="map_canvas">Map loading..</div>
</article>
<article id="infowin">
info window
</article>
</section>
</body>
</html>
working code an be found here http://www.connectteesvalley.com/traindepartures1.asp
I just need to make the information open in the info window box. any ideas ?
Thanks
https://stackoverflow.com/questions/19536053
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian