造型谷歌地图标记

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;
});