樣式化谷歌地圖標記

Question

我正在使用基礎框架構建移動應用程序。 我在谷歌地圖上設置標記樣式時遇到問題。 我已經按照參考在谷歌上建立了一個標記。 但我不知道如何設計里面有按鈕的標記。

第一張圖片：這是我應該遵循的設計

第二張圖片：這是我到目前為止所做的輸出

地圖代碼：

function initMap() {
    var myLatLng = {lat: 2.924793, lng: 101.651487};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: myLatLng,
       styles: [
        {elementType: 'geometry', stylers: [{color: '#242633'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.fill', stylers: [{color: '#B9D0DB'}]},
        {
          featureType: 'administrative.locality',
          elementType: 'labels.text.fill',
          stylers: [{color: '#B9D0DB'}]
        },
        {
          featureType: 'poi',
          elementType: 'labels.text.fill',
          stylers: [{color: '#B9D0DB'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'geometry',
          stylers: [{color: '#263c3f'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'labels.text.fill',
          stylers: [{color: '#6b9a76'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{color: '#33354F'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry.stroke',
          stylers: [{color: '#212a37'}]
        },
        {
          featureType: 'road',
          elementType: 'labels.text.fill',
          stylers: [{color: '#00C4FF'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{color: '#746855'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{color: '#1f2835'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'labels.text.fill',
          stylers: [{color: '#f3d19c'}]
        },
        {
          featureType: 'transit',
          elementType: 'geometry',
          stylers: [{color: '#2f3948'}]
        },
        {
          featureType: 'transit.station',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'water',
          elementType: 'geometry',
          stylers: [{color: '#17263c'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.fill',
          stylers: [{color: '#515c6d'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.stroke',
          stylers: [{color: '#17263c'}]
        }
      ]

    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Location History',

    });
  }

Answer 1

 var image = 'img/icons/marker.svg';
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Location History',
      icon: image,
      url: 'add_order.html',
    });

    google.maps.event.addListener(marker, 'click', function() {
    window.location.href = marker.url;
});