从地图标记打开Goog​​le方向到div

时间:2014-06-19 13:17:14

标签: javascript html google-maps

我试图通过标记打开方向点击谷歌地图而不是新窗口。

目前我可以在新窗口中打开方向,但是我想在div中的iframe中打开它们,当点击标记时会显示它。

我无法在iframe上使用静态src网址,因为我在地图上为不同的标记使用了不同的网址。

任何帮助都会很棒,这是我到目前为止所做的。

  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;
    });
}

HTML:

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

我试过制作一个变量this.url并在函数中设置但没有运气

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

2 个答案:

答案 0 :(得分:0)

您是否尝试将其拆分为函数?

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

答案 1 :(得分:0)

以下是一个简单的示例:http://jsfiddle.net/lotusgodkk/x8dSP/3550/

我已经粘贴了应该在循环中的代码。看看吧。

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();
});

关于您在评论中提到的错误,请参阅以下答案:Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found

错误必须归因于协议问题。另请注意,由于same origin policy,iframe无法加载。在此处阅读更多内容:http://javascript.info/tutorial/same-origin-security-policy