Is there a way to Fix a Google Maps Marker to the Center of its Map always?

by

Rather than injecting an HTML component as suggested in @Dr.Molle’s answer, why don’t you use a CSS only solution.

It is simpler, more efficient and doesn’t require you to even touch the DOM (so there won’t be any problems if Google changes their implementation).

Also since Google Maps doesn’t apply any styles on the container element (#map) the solution is pretty safe. 

#map {
    position: relative;
}

#map:after {
    width: 22px;
    height: 40px;
    display: block;
    content: ' ';
    position: absolute;
    top: 50%; left: 50%;
    margin: -40px 0 0 -11px;
    background: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png');
    background-size: 22px 40px; /* Since I used the HiDPI marker version this compensates for the 2x size */
    pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */
}

Here is a jsFiddle.

More Related Contents:

  1. Verify if a point is Land or Water in Google Maps
  2. Google Maps v3 – limit viewable area and zoom level
  3. How to make cross-domain AJAX calls to Google Maps API?
  4. Google maps Places API V3 autocomplete – select first option on enter
  5. How to call fromLatLngToDivPixel in Google Maps API V3?
  6. Google Maps JavaScript API RefererNotAllowedMapError
  7. Google maps API V3 – multiple markers on exact same spot
  8. Google Maps API v3: Can I setZoom after fitBounds?
  9. Midpoint of route in google maps
  10. How can I create numbered map markers in Google Maps V3?
  11. Google Maps JavaScript API won’t display markers from KML exported from My Maps
  12. Maximum Lat and Long bounds for the world – Google Maps API LatLngBounds()
  13. Google Maps API v3 adding an InfoWindow to each marker
  14. Inconsistent behaviour drawing a route between two points in Google Maps v3
  15. Country specific zoom level in Google Maps API
  16. polyline snap to road using google maps api v3
  17. Multiple markers Google Map API v3 from array of addresses and avoid OVER_QUERY_LIMIT while geocoding on pageLoad
  18. Center Google Maps (V3) on browser resize (responsive)
  19. Letting users draw curved lines on a google map?
  20. How can I modify the markers?
  21. How to trigger the onclick event of a marker on a Google Maps V3?
  22. remove route with google map
  23. Check if a latitude and longitude is within a circle google maps
  24. Add CSS styled marker to google maps
  25. Using Longitude/Latitude as Waypoint
  26. Google map multiple overlay no cumulative opacity
  27. Google Directions Api returning 0 routes
  28. Google Maps API map doesn’t appear [duplicate]
  29. How to connect two points in Google map..?
  30. Change map opacity outside circle of Google Maps JavaScript API v3

Leave a Comment