以編程方式在Google地圖上添加「在Google地圖上查看」自定義按鈕

我試圖在我的網站上自定義並添加Google地圖地圖。以編程方式在Google地圖上添加「在Google地圖上查看」自定義按鈕

我能夠以編程方式使用谷歌地圖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);

現在，我想補充的「打開在谷歌地圖」按鈕：

enter image description here

爲了讓用戶瀏覽地圖，並獲得方向的標記指向的地方。

我正在閱讀documentation，但我只能找到「url示例」，並沒有任何與JS配置我的地圖相關。

任何人有任何建議嗎？

謝謝

來源

2014-12-26 BeNdErR

我猜測實際的問題是將按鈕添加到地圖。你需要創建一個看起來像一個按鈕，有一個點擊處理自定義控件，你需要將它添加到地圖控件數組：

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。

來源

2014-12-26 22:14:28

以編程方式在Google地圖上添加「在Google地圖上查看」自定義按鈕

回答

相關問題