Google map custom marker with css rounded corner

by

As of version 3.17, the google.maps.Marker objects exists in the markerLayer pane which is just a fancy name for a div.

To get a reference to the markerLayer you need to create an OverlayView Object. Now, this object is a bit abstract. You need to implement a draw function for it to work. For example, open the basic example in a new tab and paste this to the console

var overlay = new google.maps.OverlayView();
overlay.draw=function() {};

overlay.setMap(map);

overlay.getPanes();

it returns:

{
    floatPane: div
    floatShadow: div
    mapPane: div
    markerLayer: div
    overlayImage: div
    overlayLayer: div
    overlayMouseTarget: div
    overlayShadow: div
}

Thay markerLayer is a div which contains the markers. If I create your marker using a given icon image, 

var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map,                          
                icon: 'http://ruralshores.com/assets/marker-icon.png',
                optimized:false
             });

My markerLayer will be:

enter image description here

Where the selected div (the one with z-index 103) is the markerLayer.

If you wanted to access the markerLayer programatically, you could add a “markerLayer” class to it after getting its reference with the getPanes method. I guess that every image inside the markerLayer is a marker, so you could style it at will.

TL/DR : you can style it, provided you went through all the trouble of finding the DOM reference to your marker.

Edit: I made a bl.ocks for you to check

More Related Contents:

  1. Add CSS styled marker to google maps
  2. Google Maps JS API v3 – Simple Multiple Marker Example
  3. Using Address Instead Of Longitude And Latitude With Google Maps API
  4. How to Display Multiple Google Maps per page with API V3
  5. Google Map API v3 — set bounds and center
  6. Google Map API – multiple icons in wrong spot
  7. What’s the API Key for in Google Maps API V3?
  8. Google Maps API autocomplete 2nd address fields on same page
  9. google maps move marker with lat/lng from ajax success returned data
  10. Google Maps API V3 : How show the direction from a point A to point B (Blue line)?
  11. Do I need to hide API key when using google maps js API? If so, how?
  12. How to set zoom level in google map
  13. Google Maps – How to get the distance between two point in metre?
  14. Load google maps v3 dynamically with ajax
  15. How to get the formatted address from a dragged marker in Google Version Maps
  16. How to draw a polygon around a polyline in JavaScript?
  17. Google Maps not rendering completely on page?
  18. Request main road / curbside StreetView panoramas instead of back alleys from API
  19. Open infoWindows from an external link outside of the google map
  20. XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ Google maps
  21. Animating Multiple Markers
  22. Google Maps API v3: How do I dynamically change the marker icon?
  23. How to trigger the onclick event of a marker on a Google Maps V3?
  24. Google Maps: Auto close open InfoWindows?
  25. Determine if point is within bounding box
  26. Adding simple marker clusterer to google map
  27. Google map multiple overlay no cumulative opacity
  28. Google Directions Api returning 0 routes
  29. Change map opacity outside circle of Google Maps JavaScript API v3
  30. Google maps API V3 method fitBounds()

Leave a Comment