title: Styling google maps marker
body: <p>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.</p>
  
  <p>1st image: This is the design that i should follow</p>
  
  <p><a href="https://i.stack.imgur.com/as2JN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/as2JN.png" alt="Example design"></a></p>
  
  <p>2nd image: This is the output that i've done so far
  <a href="https://i.stack.imgur.com/nhmqt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nhmqt.png" alt="output"></a></p>
  
  <p>maps code: </p>
  
  <pre><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',
  
      });
    }
  </code></pre>