스타일링 Google지도 마커

Question

저는 기초 프레임 워크를 사용하여 모바일 앱을 제작하고 있습니다. Google지도에서 마킹을 스타일링하는 데 문제가 있습니다. Google에서 마커를 만들기 위해 참조를 따랐습니다. 하지만 그 안에 버튼이있는 표식을 어떻게 스타일링해야할지 모르겠다.

첫번째 이미지 :

: 이것은 내가

맵 코드 지금까지 수행 한 출력이 내가

2 이미지를 따라야 디자인

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