Styling google maps marker

Question

I'm building a mobile app using foundation framework. I'm having a problem to styling marker on the google maps. I've follow the reference to build a marker on google. But I dont know how to styling the marker that have button inside it.

1st image: This is the design that i should follow

2nd image: This is the output that i've done so far

maps code:

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