Integrating with Google Maps API


Typically I've always been a front-end developer as well as a project manager so integrating with APIs I haven't had much experience in. I set myself a challenge to integrate with Google Maps API, firstly to say I've integrated with an API and secondly to use it to create something pretty cool!

I started reviewing Google Maps API documentation which is really detailed, easy to follow and allows for developers to view multiple languages such as TypeScript and JavaScript.

I was able to integrate with Google Maps using JavaScript and make two maps, one that is my homepage to display where I am coding from (a simple pin in Melbourne) and the other is larger project where I customised the cute purple map to display pins of where I've been on holiday. With COVID-19 blocking most of my travel plans I've decided to map out where in the world I've been and where I would like to go.

CMS Managed

All of my pins are CMS managed in Craft CMS, I've structured the code to pick up the longitude and latitute and I can specify which pin type I would like, a red pin image or a purple heart emoji with a simply dropdown. By having these values as CMS managed I can easily update my map without having to make code changes, push to GitHub and deploy to production.

If you want to check out my maps project you can access it at:

More features to follow! :)