Zyring Day 8 – Google Maps time!

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Google Maps API key

Nice easy step here – obtain a key for the Google Maps API. OK, this was actually slightly more complicated than expected as Google’s instructions appear to be out of date, and the actual process was a bit different… not too much of a challenge though.

Installing a Google Maps directive

Another setup-type tutorial here, though again somewhat confusing. The particular page of of documentation linked to was for something called the Google Maps Asynchronous Loader, but I don’t know whether that is something to install on its own or as part of the angular-google-maps package. Anyway I just installed angular-google-maps with bower using the instructions on the Quickstart page. I originally didn’t read the bit about not needing to update index.html manually but that didn’t really matter, it was kind of useful to dig around the files and see where everything was saved anyway.

After that it was time to actually include some maps! Again, I followed the Quickstart instructions, using my API key from the previous step, and it went pretty smoothly – I now have a map (of Montreal) at the top of the page for each city.

A map (of Montreal, not Olympia)

Not a map of Olympia.

Centring Google Maps

This just involved moving the map from Montreal to Seattle. I was mildly surprised that Seattle is a good way north of Montreal, but other than that not much to report here.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s