Display error on google maps in 2 tabs jQuery -
i have problem display google maps in tabs,
this wath have tried no sucess, in ie works fine in firefox tab not showing corect , line on route planner not work-ing. point poin b - there shoud line..
please see link: http://s1.xfactor-online.com/
wath have done rong?
this html
<!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" /> <title>route planner</title> <script type="text/javascript" src="/js/script.js"></script> <script type="text/javascript" src="/js/tabs.js"></script> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.maphilight.min.js"></script> <link rel="stylesheet" href="/css/stil.css" type="text/css" media="screen" /> <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"> var directiondisplay; var directionsservice = new google.maps.directionsservice(); var map; function initialize_route() { var myoptions = { zoom: 10, center: new google.maps.latlng(42.662068,23.388755), maptypeid: google.maps.maptypeid.roadmap } map = new google.maps.map(document.getelementbyid("map_go"), myoptions); directionsdisplay = new google.maps.directionsrenderer({ 'map': map, 'preserveviewport': true, }); directionsdisplay.setpanel(document.getelementbyid("directions_panel")); google.maps.event.addlistener(directionsdisplay, 'directions_changed', function() { if (currentdirections) { olddirections.push(currentdirections); setundodisabled(false); } currentdirections = directionsdisplay.getdirections(); }); setundodisabled(true); calcroute(); } function calcroute() { var start = document.getelementbyid("start").value; var end = document.getelementbyid("end").value; var request = { origin:start, destination:end, travelmode: google.maps.directionstravelmode.driving }; directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); } }); } function loadscript_route() { var script = document.createelement("script"); script.type = "text/javascript"; script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize_route"; document.body.appendchild(script); } window.onload = loadscript_route; </script> <script> function initialize_map() { var mylatlng = new google.maps.latlng(42.662068,23.388755); var myoptions = { zoom: 16, center: mylatlng, maptypeid: google.maps.maptypeid.roadmap } var map = new google.maps.map(document.getelementbyid("map_go_full"), myoptions); var pos1 = new google.maps.latlng(42.662068,23.388755); var image = 'http://icongal.com/gallery/download/446950/32/png'; var marker = new google.maps.marker({ position: pos1, map: map, icon: image }); marker.setmap(map); } function loadscript_map() { var script = document.createelement("script"); script.type = "text/javascript"; script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize_map"; document.body.appendchild(script); } window.onload = loadscript_map; </script> <script type="text/javascript"> $(document).ready(function(){ $("#tabs li").click(function() { $("#tabs li").removeclass('active'); $(this).addclass("active"); $(".tab_content").hide(); var selected_tab = $(this).find("a").attr("href"); $(selected_tab).fadein(); return false; }); }); </script> <script type="text/javascript"> window.onload = function () { initialize_route(); initialize_map(); } </script> </head> <body> <div id="tabs_wrapper"> <div id="tabs_container"> <ul id="tabs"> <li><a href="#tab1" onclick="loadscript_map();">map</a></li> <li><a href="#tab2" onclick="loadscript_route();" >route planning</a></li> </ul> </div> <div id="tabs_content_container"> <div id="tab1" class="tab_content" style="display: block;"> <div id="map_go_full"></div> </div> <div id="tab2" class="tab_content"> <div id="map"> <table> <tr> <td><b>start position:</b> <br /> <input type="text" size="35" id="start" class="poz" name="from" value=""/></td> <td><b>destination: </b>address (optional), city, country<br /> <input type="text" size="135" id="end" name="to" class="des" value="iasi" /></td> <td align="right" colspan="2"><br /> <input class="but" value="calculate route" type="submit" onclick="calcroute();" /></td> </tr> </table> * please enter position calculate route. <table> <tr> <td class="hs"><b>satelite map</b></td> <td class="hd"><b>directions</b></td> </tr> <tr> <td valign="top"><div id="map_go"></div></td> <td valign="top"><div class="hdir"> <div id="directions_panel"></div> </div> <div id="undo"></div></td> </tr> </table> </div> </div> </div> </div> </body> </html> thanks
firstly should more specific on problem, , please try use speller, don't need speak great english @ least kind enough auto correct words.
i didn't find different between ie , firefox, although console shows error in route planning tag: warning: have included google maps api multiple times on page. may cause unexpected errors.
this might problem, check code repeated includes of google maps , delete them, need 1 per file.
Comments
Post a Comment