在Google地图上添加＆＃34;查看＆＃34;以编程方式在Google地图上自定义按钮

Question

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

我可以使用谷歌地图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);

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

为了让用户浏览地图并获取指向标记所在位置的方向。

我正在阅读documentation，但我只能找到“url examples”，并且没有任何与JS相关的配置我的地图。

任何人都有任何建议吗？

谢谢

Answer 1

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

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。