Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help request for HTML code to embed map with directions into page with links please

    I'm really struggling to try to find the code to embed 2 links onto a website page which initially will display a map, eg of the UK. Once either of the 2 links are clicked, it will then draw out the directions on the map on the SAME website page map

    This may sound a big vague but what I'm trying to achieve is a list of links (routes eg) down the left side of the page and when clicked the map on the SAME page shows the directions

    If someone can do get this working, would you mind posting the complete HTML code please, or at least the opening and closing BODY tags so that I can duplicate it

    Ideally, the map would be placed on a DIV on the page but anything that gets both the links AND the map on the same page will be greatly appreciated

    Thanks, Stephen (map code follows)

    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=d&amp;source=s_d&amp;saddr=london&amp;daddr=Edinburgh&amp;hl=en-GB&amp;geocode=FXjUEQMd5BL-_yl13iGvC6DYRzGZKtXdWjqWUg%3BFWC7VQMdsFzP_ykjJpilALiHSDEnF-d8exTyZA&amp;mra=ls&amp;sll=54.59076,-5.932046&amp;sspn=0.007373,0.019205&amp;ie=UTF8&amp;ll=53.723355,-1.911875&amp;spn=4.45365,3.57127&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=d&amp;source=embed&amp;saddr=london&amp;daddr=Edinburgh&amp;hl=en-GB&amp;geocode=FXjUEQMd5BL-_yl13iGvC6DYRzGZKtXdWjqWUg%3BFWC7VQMdsFzP_ykjJpilALiHSDEnF-d8exTyZA&amp;mra=ls&amp;sll=54.59076,-5.932046&amp;sspn=0.007373,0.019205&amp;ie=UTF8&amp;ll=53.723355,-1.911875&amp;spn=4.45365,3.57127" style="color:#0000FF;text-align:left">View Larger Map</a></small>

    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=d&amp;source=s_d&amp;saddr=london&amp;daddr=glasgow&amp;geocode=FXjUEQMd5BL-_yl13iGvC6DYRzGZKtXdWjqWUg%3BFRtxVAMdOQq__ynrzlYgVhWISDEeUe8FuIPmcQ&amp;hl=en-GB&amp;mra=ls&amp;sll=53.29491,-3.031005&amp;sspn=3.89394,9.832764&amp;ie=UTF8&amp;ll=53.685225,-2.195995&amp;spn=4.37739,4.13951&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=d&amp;source=embed&amp;saddr=london&amp;daddr=glasgow&amp;geocode=FXjUEQMd5BL-_yl13iGvC6DYRzGZKtXdWjqWUg%3BFRtxVAMdOQq__ynrzlYgVhWISDEeUe8FuIPmcQ&amp;hl=en-GB&amp;mra=ls&amp;sll=53.29491,-3.031005&amp;sspn=3.89394,9.832764&amp;ie=UTF8&amp;ll=53.685225,-2.195995&amp;spn=4.37739,4.13951" style="color:#0000FF;text-align:left">View Larger Map</a></small>

  • #2
    New Coder
    Join Date
    Aug 2002
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've stripped away as much of the code as possible from the link and end up with the cut down listing below. From this, could anyone please point me in the right direction of where to go next to develop this further

    Ideally a tutorial would be great!

    Thanks, Stephen

    script>

    <script type="text/javascript" src="/Script/scripts2/global/mootools-1.2.3.js?ver=1406201000"></script>

    <script type="text/javascript" src="/Script/scripts2/global/mootools-more-1.2.3.1.js?ver=1406201000"></script>

    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2.118&amp;key=ABQIAAAAbpCilOG1sNOfABXsdC5RixT2aLbNS5moP_F4uRYCOrwur7NCOBTh7-ppojIWsQh_a3Djhs23rUNerQ&amp;hl=en"></script>

    <script type="text/javascript" src="/Script/GMapX.js?14062010"></script>

    <script type="text/javascript" src="/Script/MapAndDirections.js?14062010"></script>

    <script type="text/javascript">
    var gMap_jsId = null;
    function render() {
    if( GBrowserIsCompatible()) {
    gMap_jsId = new GMap2(document.getElementById("map"));
    gMap_jsId.setCenter(new GLatLng(0,0),0);
    GEvent.addListener(gMap_jsId, "click", window.GMap_Click||_ef);
    am(-5.92444,54.60154,191786);
    gMap_jsId.addControl(new GLargeMapControl());
    gMap_jsId.addControl(new GScaleControl());
    gMap_jsId.addControl(new GMapTypeControl());

    centreAndAutoZoom();
    }
    }
    $(window).addEvent('load', render);
    $(window).addEvent('unload', GUnload);
    </script>

    <script type="text/javascript" src="/Script/HotelDetailsPanel.js?ver=1406201000"></script>

    <script type="text/javascript" src="/Script/scripts2/shared/modalpop.js?ver=1406201000"></script>

    <script type="text/javascript" src="/Script/StarRating.js?ver=1406201000"></script>

    <script type="text/javascript" src="/Script/Utility.js?ver=1406201000"></script>

    <script type="text/javascript" src="/Script/PageTrack.js?ver=1406201000"></script>

    <script type="text/javascript" src="/Script/zoom.js?ver=1406201000"></script>

    <script type="text/javascript" src="/Script/SearchPanel2.js?ver=1406201000"></script>

    <script type="text/javascript" src="/Script/scripts2/shared/calendar.js?ver=1406201000"></script>

  • #3
    New Coder
    Join Date
    Aug 2002
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've uploaded the page to http://webspace.mypostoffice.co.uk/~...dner1/map.html
    Hopefully that might help
    Stephen


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •