I often try using a new feature by adding the most local code possible, that is, right where I need it. It fails, of course. The UX for developers is very rarely a priority. When it fails, I then fix one problem at a time, step-by-step, slowly getting the feature to do its job, by working my way outwards from that first bit of code, and seeing what kinds of errors I get. I want to see whether the errors point me to the next-most general problem or, instead, obscure what's actually going on. As everyone knows, it's usually the latter.
I have a hope that someday error messages will become genuinely useful, and not just strings that we need to search for in Google, in the hope that someone like me has explained the error message, and how to make the necessary repairs.
In this case, quite a lot of time could have been saved if the Google Maps API (which is loaded) had simply caught the exceptions and told me "do (1), then (2), then (3) ..."
Ah well. Developer advocates clearly have no power inside such giant technocracies.
The goal: I wanted a custom marker. The 'free' way to do this is by adding an 'image' name-value pair in a marker:
const bluepin = "/bluepin.png";
...
marker = new google.maps.Marker({position,map,icon: bluepin});
But there's a new set of advanced marker features. The documentation didn't match my use case (my markers are created in a listener), so I started with:const pinBackgroundBlue = new PinElement(
{background: "blue"});
...
marker = new AdvancedMarkerElement(
{map,position: position,
content: pinBackgroundBlue.element});... and in the console, Javascript told me that pinElement was not found. Fair enough.
In the head element I added an import of the appropriate Google Maps libraries:
<script async defer src="https://maps.googleapis.com/maps/api/js
key=YOUR_GOOGLE_MAPS_KEY
&v=beta
&libraries=visualization,marker
&callback=initMap">
</script>Now, in the function initMap itself, I didn't change the map declaration.
The map is global, however.
In the listener, I added the recommended import mappings:
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
"marker"
);
But since this was a listener, javascript gave me an error. The enclosing function wasn't async, so it could not await.
So I did this, which worked:
const { Map } = google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = google.maps.importLibrary("marker");
Now it didn't complain about await / async.
But still: "PinElement not found".
Maybe the namespace is still isolated? I really don't know how much "importLibrary" is supposed to do. So I tried:
const pinBackgroundBlue = new window.google.maps.marker.PinElement(
{background: "blue"});Now it found PinElement!
But it said "PinElement is not a constructor".
Well ... that's just silly. Of course it is.
So, I read the documentation, watched the Google Maps videos ...
And the only thing that could be missing was something that was new to me:
A "MapId".
This is for elite maps, I suppose, since Google requires that the privilege of a generated MapId is added to your billing account. I don't know what the charge is now, or later.
But if you just want to try it, add the following to the name-value pairs in your map declaration:
mapId: 'DEMO_MAP_ID'
And now PinElement is a constructor! And your custom pin will appear on the map.
