Reflection + Google Map Events

With only a days left in my journey at the Flatiron School, I find myself reflecting on the past modules. It feels as though the time flew by yet it feels like we were here forever. I have had many of the students from the previous modules ask me questions about certain topics and looking for guidance in how to approach certain things. I was approached about an acronym that I had made in Mod2 to help me remember the RESTful routes for Rails. They wanted me pass it down to them. The acronym was “I Show New Creativity Even Under Duress”. It stands for Index, Show, New, Create, Edit, Update and Destroy. It feels really good to be able to spread knowledge to the other students. So I decided to leave them some more info for when they get to Mod5 and maybe want to work with Google Maps.

My Mod5 project is very dependent upon me using some sort of map feature and I decided to give Google Maps a whirl. It was fairly easy to set up the maps. A fellow student wrote a blog about it and it was super helpful in the setting up of my map feature. Check out his blog to get you going with Google Maps in your React application.

However, as smooth sailing as that went, I soon realized that the google InfoWindow does not support us adding an event the way that we know how. It will let you add a button, yet you cannot do anything useful with said button. So I decided to scour the internet and try to find a way around this because having that feature really made my project what it needed to look like in my eyes. I stumbled upon bits and pieces of what one should do if trying to add an event but nothing too solid. Eventually I decided to just keep trying and I dove deeper and found the solution. I had to make a different component and pretty much make a reference point in React.

The code is rendering the child elements and basically setting itself to all the child elements that gets written at any time. So typically you would use an InfoWindow component to show the information that you wanted on the maps. By making the component you see above, this replaces that and is used instead. As you can see I imported InfoWindowEx which is the component that I made to render the children elements.

This is what the code looks like using that component along with others that was imported. As you can see, now I am able to add a button inside that div equipped with an event that is calling a function that is going to use the selected object to be added as a favorite.

Now my maps are able to show the information I want along with the button that is going to have you save the brewery that you want to refer back to at a later time.

I really enjoyed my time in this program and I really wanted to add something that is more accessible and can explain how to get your events working while using Google Maps. So I hope this makes it a bit easier on some that will be searching for that feature. Good luck everyone.

Rashad. Out!