Embedding Google Maps into Media Link

Following on from the last blog post I made, I explained that my intention of Semester 2 was to first tackle the GPS functionality of the map graphic.

I was pleasantly surprised at how easy the process was to embed Google maps into my site. I had never used an external API before and had anticipated it being difficult. However, when following each step from the Google API page it was extremely simple: https://code.google.com/apis/console/?noredirect#project:1074340445736:access

By turning the Google map service ‘on’ I received a API key and the set of instructions to embed the map onto my webpage. Google provides the code and gives guidance on how to adapt certain settings of the map, such as the origin point which at default is set to Sydney. I wanted to experiment and see if I could set the maps default location to Leeds by finding out the Longitude and Latitude which I successfully did using the following website: http://www.doogal.co.uk/LatLong.php

As well as this I edited the zoom setting and the map-canvas size.

var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};

The next challenge is to flag the ‘Co-working spaces’ and ‘Events and Conferences’ locations on the map, as well as customising the map to a silhouette solid colour.

Advertisements
This entry was posted in Code. Bookmark the permalink.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s