Loading custom HTML to google markers

So, a lot of people suggest that you can't load markers with your custom content when using google maps. It's simply untrue. The markers are loaded client side, so you are able to do whatever.

Take the following code for your click event.

         var content;
        fetch('pages/checkin.html')
          .then(response => response.text())
          .then((data) => {
            content = data;
            var infowindow = new google.maps.InfoWindow({content:content});

            var  marker2 = new google.maps.Marker({
              map: map,
              position: place2.geometry.location
            })

            marker2.addListener('click', function() {
                console.log("Click");
                map.setCenter(marker2.position);
              infowindow.open(map, marker2);
            });

First we obtain the new html by fetching it from the server.




Then in the 'then' we then create the info window, and apply that.



Many other solutions require creating a custom class and inheritance. You don't need that at all.


    

The return.

Wow! It has been a while, I thought this was gone. I will now be using this space to talk my experiences with programming and maybe some other things. Cheers to the old readers!