[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.
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.