Open Google directions into div from Map marker

Question

Im trying to open directions from a marker click on google maps in a div rather than in a new window.

Currently I can open the direction in a new window but I want to open them in an iframe in a div that will be displayed when a marker is clicked.

I cant use a static src url on the iframe because I use different URL for the different markers on the map.

Any help would be great, this is what I have so far.

  var depots = [
  ['Barnsley', 53.572664, -1.455800, 11, 'http://maps.google.com/?daddr=53.572664,-1.455800&directionsmode=driving'],
  ['Birmingham', 52.359018, -1.938033, 10, 'http://maps.google.com/?daddr=52.359018,-1.938033&directionsmode=driving'],
  ['Brentwood', 51.576452, 0.278843, 9, 'http://maps.google.com/?daddr=51.576452,0.278843&directionsmode=driving'],
  ['Bristol', 51.501280, -2.366513, 8, 'http://maps.google.com/?daddr=51.501280,-2.366513&directionsmode=driving'],
  ['Cambridge', 52.184396, -0.064012, 7, 'http://maps.google.com/?daddr=52.184396,-0.064012&directionsmode=driving'],
  ['Edinburgh', 56.129890, -3.390296, 6, 'http://maps.google.com/?daddr=56.129890,-3.390296&directionsmode=driving'],
  ['Gatwick', 51.152422, -0.216219, 5, 'http://maps.google.com/?daddr=51.152422,-0.216219&directionsmode=driving'],
  ['Glasgow', 55.927129, -4.467189, 4, 'http://maps.google.com/?daddr=55.927129,-4.467189&directionsmode=driving'],
  ['Heathrow', 51.508121, -0.387525, 3, 'http://maps.google.com/?daddr=51.508121,-0.387525&directionsmode=driving'],
  ['Manchester', 53.220004, -2.414895, 2, 'http://maps.google.com/?daddr=53.220004,-2.414895&directionsmode=driving'],
  ['Southampton', 50.959088, -1.345449, 1, 'http://maps.google.com/?daddr=50.959088,-1.345449&directionsmode=driving'],


  ];
for (var i = 0; i < locations.length; i++) {
    var depot = locations[i];
    var myLatLng = new google.maps.LatLng(depot[1], depot[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: depot[0],
        zIndex: depot[3],
        url: depot[4]
    });

    google.maps.event.addListener(marker, 'click', function() {
        document.getElementById('direction').style.display = "";
        window.location.href = this.url;
    });
}

The HTML:

<div id="directionholder">
    <iframe id="directioniframe" frameborder="0" > </iframe>
</div>

I have tried making a var of this.url and setting that in the function but no luck

var URLis = this.url;
document.getElementById('directioniframe').src = " URLis ";

remove quotes from "URLis" and use URLis in your last line of code and try. — K K, Jun 19 '14 at 13:19
I get a :( The file or directory could not be found. in my iframe — MrHolroyd, Jun 19 '14 at 13:24

score 0 · Answer 1 · answered Jun 19 '14 at 13:31

0

Have you try to split it in a function?

google.maps.event.addListener(marker, 'click', direction);
function direction(evt)
{
   document.getElementById('directioniframe').src = this.url;
}

answered Jun 19 '14 at 13:31

stefano

16
1

Just tried that no jou, where should I put the URLis var? still inside the function? – MrHolroyd Jun 19 '14 at 13:34
You may also set an attribute to the marker like "depotIndex", reading it in the sub function and build your url dinamically reading data from depot array – stefano Jun 19 '14 at 14:18
Im using the URL's so that when the marker is tapped on it has end location in the map. Im not sure what you mean by creating a depotindex? – MrHolroyd Jun 19 '14 at 14:43

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

Here's a simple example how it should be done: http://jsfiddle.net/lotusgodkk/x8dSP/3550/

I have pasted the code which should be inside the loop. Have a look at it.

JS:

 var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Hello World!',
    url:'http://jsfiddle.net'
});
google.maps.event.addListener(marker, 'click', function () {
    //document.getElementById('direction').style.display = "";
    var win = window.open(this.url, '_blank');
    win.focus();
});

Regarding the error you mentioned in the comments, refer this answer:Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found

The error must be due to the protocol issue. Also note that the iframe will not load because of the same origin policy . Read more here : http://javascript.info/tutorial/same-origin-security-policy

edited May 23 '17 at 12:27

Community

1
1

answered Jun 19 '14 at 13:35

K K

17,794
4
30
39

So, This isnt possible due to to being to different domains? – MrHolroyd Jun 19 '14 at 13:39
If you want to read more about it http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy – K K Jun 19 '14 at 13:43
Hmm ok, can you suggest a work around? It is for a web app that will allow directions to the location when the respective marker is tapped. – MrHolroyd Jun 19 '14 at 13:43
I would happy if I could open the phones native browser to view them, I did try and get the URL schemes working so that it would open in a maps app. – MrHolroyd Jun 19 '14 at 13:46
You can try opening the url in new tab and based on the settings of the user, native map app might open for the url. Check the updated answer – K K Jun 19 '14 at 13:51
Thanks works on a desktop browser ill test it in app now and get back to you thanks – MrHolroyd Jun 19 '14 at 13:53
After testing in the app which the UI is built in a HTML layer it just opens to a full screen of the google maps so I can not navigate back into the UI of the app – MrHolroyd Jun 19 '14 at 14:32
Okay. I am not sure about the app but you can try looking for a non-fullscreen view of map in your ui.you can search on SO. – K K Jun 19 '14 at 15:07

Open Google directions into div from Map marker

2 Answers2