在新窗口中获取路线 谷歌地图API v3.

Get directions in new window Google maps API v3

本文关键字:获取路 谷歌地图 API v3 新窗口 窗口      更新时间:2023-09-26

我在我的联系页面中嵌入了一个谷歌地图,里面有谷歌地图js api。

我现在想做的是,当人们点击我的标记时,他们会去 maps.google.com 获取路线并查找更多信息。

    google.maps.event.addListener(marker, 'click', function () {
        window.open('http://goo.gl/muSZ5','_blank');
    });

那是我的代码,URL 是一个带有添加参数的短 URL maps.google.com。

脚本工作,但浏览器不会自动转到它打开的选项卡(因为它是由 javascript 触发器调用的)

有谁知道我该如何解决这个问题。

因此,单击标记,新窗口(选项卡)

打开,自动转到该窗口(选项卡)

这是我的完整代码:

  (function ($) {
    Drupal.behaviors.location_block = {
        attach: function (context, settings) {
            console.log('test');
            var myOptions = {
                center: new google.maps.LatLng(50.87760,4.41923),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(50.87760,4.41923),
                map: map,
                title: "Ilias",
                html: ""
            });
            google.maps.event.addListener(marker, 'click', function () {
                window.open('http://goo.gl/maps/L3rK','_blank');
            });
        }
    };
})(jQuery);

@EDIT @IMPORTANT我发现问题仅在谷歌浏览器中,并且仅在我的网站上...

在我的机器中工作正常。请检查以下代码:

网页代码:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>​

JS代码:

function initialize() {
    var myLatLng = new google.maps.LatLng( 50, 50 ),
        myOptions = {
            zoom: 4,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            },
        map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ),
        marker = new google.maps.Marker( {position: myLatLng, map: map} );
    google.maps.event.addListener(marker, 'click', function () {
       window.open('http://goo.gl/muSZ5','_blank');
    });
    marker.setMap( map );
}
initialize();

CSS代码:

#map-canvas
{
height: 400px;
width: 500px;
}​

查看在线演示