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

stephenc

06-10-2010, 04:39 PM

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&source=s_d&saddr=london&daddr=Edinburgh&hl=en-GB&geocode=FXjUEQMd5BL-_yl13iGvC6DYRzGZKtXdWjqWUg%3BFWC7VQMdsFzP_ykjJpilALiHSDEnF-d8exTyZA&mra=ls&sll=54.59076,-5.932046&sspn=0.007373,0.019205&ie=UTF8&ll=53.723355,-1.911875&spn=4.45365,3.57127&output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=d&source=embed&saddr=london&daddr=Edinburgh&hl=en-GB&geocode=FXjUEQMd5BL-_yl13iGvC6DYRzGZKtXdWjqWUg%3BFWC7VQMdsFzP_ykjJpilALiHSDEnF-d8exTyZA&mra=ls&sll=54.59076,-5.932046&sspn=0.007373,0.019205&ie=UTF8&ll=53.723355,-1.911875&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&source=s_d&saddr=london&daddr=glasgow&geocode=FXjUEQMd5BL-_yl13iGvC6DYRzGZKtXdWjqWUg%3BFRtxVAMdOQq__ynrzlYgVhWISDEeUe8FuIPmcQ&hl=en-GB&mra=ls&sll=53.29491,-3.031005&sspn=3.89394,9.832764&ie=UTF8&ll=53.685225,-2.195995&spn=4.37739,4.13951&output=embed"></iframe><br /><small><a href="http://maps.google.co.uk/maps?f=d&source=embed&saddr=london&daddr=glasgow&geocode=FXjUEQMd5BL-_yl13iGvC6DYRzGZKtXdWjqWUg%3BFRtxVAMdOQq__ynrzlYgVhWISDEeUe8FuIPmcQ&hl=en-GB&mra=ls&sll=53.29491,-3.031005&sspn=3.89394,9.832764&ie=UTF8&ll=53.685225,-2.195995&spn=4.37739,4.13951" style="color:#0000FF;text-align:left">View Larger Map</a></small>

stephenc

06-14-2010, 02:54 PM

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&v=2.118&key=ABQIAAAAbpCilOG1sNOfABXsdC5RixT2aLbNS5moP_F4uRYCOrwur7NCOBTh7-ppojIWsQh_a3Djhs23rUNerQ&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>

stephenc

06-15-2010, 09:11 AM

I've uploaded the page to http://webspace.mypostoffice.co.uk/~stephen.cordner1/map.html
Hopefully that might help
Stephen