Google map custom marker with css rounded corner

Question

I have managed to use and apply my own marker on google map as below.

var marker = new google.maps.Marker({
                            position: point,
             


        

Answer 1

Hello i try all this answers but no one work as i wanna Try this first Create a div contains the image (MarkerImage) and add CSS

   var map;

    function initialize() {
        var mapOptions = {
            zoom: 9,
            center: new google.maps.LatLng(40.6, -74)
        };
      map = new google.maps.Map(document.getElementById('map-canvas'),    mapOptions);

     // I create 3 markers using http://ruralshores.com/assets/marker-icon.png as icon
     var myIcon='http://ruralshores.com/assets/marker-icon.png';
     var marker1 = new google.maps.Marker({ position: {lat:40.8, lng:-74}, map: map, icon: myIcon, optimized:false });
     var marker2 = new google.maps.Marker({ position: {lat:40.6, lng:-74.5}, map: map, icon: myIcon , optimized:false });
     var marker3 = new google.maps.Marker({ position: {lat:40.5, lng:-74.3}, map: map, icon: myIcon , optimized:false });

     // I create an OverlayView, and set it to add the "markerLayer" class to the markerLayer DIV
     var myoverlay = new google.maps.OverlayView();
     myoverlay.draw = function () {
         this.getPanes().markerLayer.id='markerLayer';
     };
     myoverlay.setMap(map);

}


google.maps.event.addDomListener(window, 'load', initialize);

and now add somme CSS

#markerLayer img {
        border: 2px solid red !important;
        width: 85% !important;
        height: 90% !important;
        border-radius: 5px;
      }

The full Tutorial is her