如何：在新标签页中打开 Google 标记网址答案

【问题标题】：How to: Google marker url open in a new tab如何：在新标签页中打开 Google 标记网址
【发布时间】：2017-07-09 09:13:48
【问题描述】：

我想让我的地图标记在新标签中打开地图。你有什么建议吗？

var map = $that.data('googleMap');

                            google.maps.event.addListener(marker, 'click', 
function() {
                                infowindow.open(map, marker);
                            });
                        } else if(params.url) {
                            google.maps.event.addListener(marker, 'click', 
function() {
                                document.location = params.url;
                            });
                        }

在 footer.tpl 我有这个：

$("#mapContact").addMarker({
      coords: [49.004674, 14.770050],
      icon: '/themes/organie4/img/dorado/contact/location-pin.png',
      url: 'https://www.google.com/maps/place/Husova+75,+Třeboň+I,+379+01+Třeboň/'
    });

谢谢！

【问题讨论】：

标签： javascript google-maps dictionary url marker

【解决方案1】：

这样的：

var map = ... // Map declaration

var marker = new google.maps.Marker({
    position: {lat: 49.004674, lng: 14.770050},
    map: map,
    icon: '/themes/organie4/img/dorado/contact/location-pin.png',
    url: 'https://www.google.com/maps/place/Husova+75,+Třeboň+I,+379+01+Třeboň/'
});

var infowindow = new google.maps.InfoWindow({
    content: "Some text"
});

marker.addListener('click', function() {
    if (this.url) {
        document.location = this.url;
        // Or like this if you want a new tab : window.open(this.url, '_blank');
    } else {
        infowindow.open(map, this);
    }       
});

希望对你有所帮助。

编辑： 1)

    google.maps.event.addListener(marker, 'click', function() {
       infowindow.open(map, marker);
    });
} else if(params.url) {
    google.maps.event.addListener(marker, 'click', function() {
        document.location = params.url;
    });
}

被替换为：

marker.addListener('click', function() {
    if (this.url) {
        document.location = this.url;
        // Or like this if you want a new tab : window.open(this.url, '_blank');
    } else {
        infowindow.open(map, this);
    }       
});

$("#mapContact").addMarker({
    coords: [49.004674, 14.770050],
    icon: '/themes/organie4/img/dorado/contact/location-pin.png',
    url: 'https://www.google.com/maps/place/Husova+75,+Třeboň+I,+379+01+Třeboň/'
});

相当于（但带有“标记”变量）：

var marker = new google.maps.Marker({
    position: {lat: 49.004674, lng: 14.770050},
    map: map,
    icon: '/themes/organie4/img/dorado/contact/location-pin.png',
    url: 'https://www.google.com/maps/place/Husova+75,+Třeboň+I,+379+01+Třeboň/'
});

我不知道那是什么：

var map = $that.data('googleMap');

这是一个地图声明的例子：

var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 49.004674, lng: 14.770050},
    zoom: 7
});

我不知道您的“信息窗口”声明在哪里，但这里有一个简单的示例：

var infowindow = new google.maps.InfoWindow({
    content: "Some text"
});

【讨论】：

我不知道在哪里添加这段代码，是否需要删除旧的。
感谢您的编辑。我更改了代码，但现在地图不见了。
当然。我添加一个答案。
为什么不把所有谷歌地图的 JavaScript 代码放在同一个文件中？为什么使用“.tpl”文件而不是“.js”？我测试了我的代码，它运行良好，但都在同一个 JS 文件中。

【解决方案2】：

当然。这里是。

jquery.googlemap.js

var map = $that.data('googleMap');

    marker.addListener('click', function() {
    if (this.url) {
           window.open(this.url, '_blank')
          // Or like this if you want a new tab : window.open(this.url, '_blank');
                   } else {
                                infowindow.open(map, this);
                            }       
                        });

footer.tpl

var marker = new google.maps.Marker({
        position: {lat: 49.004674, lng: 14.770050},
        map: map,
        icon: '/themes/organie4/img/dorado/contact/location-pin.png',
        url: 'https://www.google.com/maps/place/Husova+75,+Třeboň+I,+379+01+Třeboň/'
  });

当我更改 footer.tpl 我的页面“联系人”时抛出 500（内部服务器错误）

【讨论】：