Is there a way to Fix a Google Maps Marker to the Center of its Map always?
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.
A different approach, that did not use a real google.maps.Marker
:
after the map has been initialized, inject a div into the map-container, give it a className(e.g. centerMarker
), the further things will be done via CSS:
.centerMarker{
position:absolute;
/*url of the marker*/
background:url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
/*center the marker*/
top:50%;left:50%;
z-index:1;
/*fix offset when needed*/
margin-left:-10px;
margin-top:-34px;
/*size of the image*/
height:34px;
width:20px;
cursor:pointer;
}
Demo: http://jsfiddle.net/doktormolle/jcHqt/