以编程方式在 Google 地图上添加“在 Google 地图上查看”自定义按钮答案

【问题标题】：Add "View on Google Maps" custom button on Google map programmatically以编程方式在 Google 地图上添加“在 Google 地图上查看”自定义按钮
【发布时间】：2014-12-26 21:48:27
【问题描述】：

我正在尝试在我的网站中自定义和添加谷歌地图。

我可以使用 google maps JS api 以编程方式添加它，地图正确显示，所有内容都使用以下代码 (see fiddle here)：

function initialize() {
    var map_canvas = document.getElementById('map-canvas');
    var map_options = {
        disableDefaultUI : false,
        center: new google.maps.LatLng(41.9100711,12.5359979),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        scrollwheel : false,
        zoomControl : true,
        streetViewControl : false,
        scaleControl : true,
    }
    var map = new google.maps.Map(map_canvas, map_options);
    var marker = new google.maps.Marker({
        map : map,
            position : new google.maps.LatLng(41.9100711,12.5359979),
            title : "Title"
    });
    var info = new google.maps.InfoWindow({
        content : "marker content"
    });
    google.maps.event.addListener(marker, "click", function(){
        info.open(map,marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

现在我想添加“在谷歌地图中打开”按钮：

为了让用户浏览地图并获得标记指向的地方的方向。

我正在阅读documentation，但我只能找到“url 示例”，而没有任何与 JS 相关的内容来配置我的地图。

有人有什么建议吗？

谢谢

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

我猜实际的问题是将按钮添加到地图上。您需要创建一个看起来像按钮并具有单击处理程序的自定义控件，并且需要将其添加到 maps 控件数组中：

var gotoMapButton = document.createElement("div");
gotoMapButton.setAttribute("style", "margin: 5px; border: 1px solid; padding: 1px 12px; font: bold 11px Roboto, Arial, sans-serif; color: #000000; background-color: #FFFFFF; cursor: pointer;");
gotoMapButton.innerHTML = "Open Google Maps";
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(gotoMapButton);
google.maps.event.addDomListener(gotoMapButton, "click", function () {
    var url = 'https://www.google.com/maps?q=' + encodeURIComponent(marker.getPosition().toUrlValue());
    // you can also hard code the URL
    window.open(url);
});

Updated Fiddle

有an official example as well。

【讨论】：