Добавить кнопку «Просмотр на Картах Google» на карте Google программно

Question

Я пытаюсь настроить и добавить карту Google Maps на своем веб-сайте.

Я могу добавить его программно с помощью 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); 

Теперь я хотел бы добавить «Open в Google кнопки карты»:

для того, чтобы позволить пользователю просматривать карту и получить направление к месту маркер, указывающий.

Я читаю documentation, но я могу найти «примеры URL» и ничего не связанного с 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.