Google maps replace markers
Sometimes you don't have the control or the ability to make direct changes to the served content of a webpage and especially a google maps.
Google maps expects you to keep track of your markers as you place them on your map div, but if you are modifying a map after it has already been created this can be quite a pain to find the marker elements in the seemingly enormous junk of the google map JavaScript library. There is no pleasant maps.getMarkers()
method there are literally hundreds of articles and poor documentation on pulling out the rendering markers and all of them say the same thing keep track of the markers with a JavaScript variable. In this case I can't do that as the map rendering is handled by the framework and it does not keep track of the markers in a nice JavaScript array function i.e. the prescribed fix is to work with the data directly and I can't.
What do I want to do?
I want to replace the default marker icon after they have rendered to the page but I don't write the page as the map and markers are created by a templating engine.
I can inject tags into the head
of every page as part of the templating engine. This is intended to put in override cascading style sheet (css) directives. However it also allows me to inject <script></script
tags which allows me to do dynamically load JavaScript onto the google map and since the I know that every marker is an icon or <img>
tag I can do some jQuery (you can do this without jQuery by direct element manipulation, but almost every webpages is going to have some jQuery on it as this one does) dynamic replacement of the markers placed with the default point of interest markers
Attach to the window
element of the Document Object Model (DOM) on the load
event to swap the element image source locations like so
<script>
window.addEventListener('load',() => {
$('img[src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png"]').attr('src', 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png');
});
</script>
and you get
As the web was built to with an original intent of linked documents swapping elements out dynamically without respect to the original source is permitted and encouraged.
Sidenote
: This is also why your NFTs are redirects that can be swapped and changed at will for one thing. The link location may be recorded on an open audit logbook, but changing what is at the location is not protected for and or changing the link location with an equivalent check value.