Part 1. Getting the map on the page
Let’s start from the end and work back to the beginning. Save this as an HTML document, change the API key, open it in your browser and you’ll have a map. I’ve saved you a bit of time by already centring it on Barrow-in-Furness bus depot.
Copy and paste that in to a text editor, replace XXXXXXXXXXXXXXXX with your own API key, save it somewhere and the load it up in your browser. You should see a satellite style map with a marker in the middle. You’re done. Simple eh? Read on learn a bit about how it works, and what you can do to change the appearance.
Part 1.1 Understanding the basic HTML
In order to try and guarantee a consistent layout across browsers you need to make sure that your page is rendered in ‘Standards Compliant’ mode as opposed to ‘Quirks’ mode. To do this you need to specify a DOCTYPE at the top of your HTML file. We’re using a very simple “html” DOCTYPE which tells the browser that we’re HTML5. In HTML4.x there were a plethora of variations – thankfully we don’t need to care about them anymore. HTML5 is the way to go, and so the only DOCTYPE we care about is “html”.
We set the title of the page, and then we set some initial viewport settings to help mobile browsers render the page correctly. This is widely regarded as a good thing, and you can learn more about it from here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
Skipping over the style and scripts for a moment, we create the main body of the page with a single div element in it. We give it the id “map-canvas”, and then we close off the bottom of the body and mark the end of the HTML. You won’t be surprised to read that the div we’ve just created will be where the map will soon appear.
Part 1.2 All about style
In standard HTML5 (remember the DOCTYPE from above) there are a few specifics you need to know about CSS. If an element specifies a size as a percentage, then that percentage is calculated from the parent objects size. Imagine you have a nested DIV, called DIV2. It lives inside DIV1. Where DIV1 has a fixed size of 500px by 500px, then DIV2 knows that 100% high equals 500px, but what if DIV1 didn’t have a size specified? In that case, in standards mode, DIV2 would decide that 100% high equals zero px – because it doesn’t know any better. This has caught people out a few times. In order to make sure that all our DIVs can inherit a size correctly we set the height of the entire HTML page and the BODY to be 100%. This is calculated by the browser when the page loads, and then can flow down to the elements within the page correctly.
Once we have the parent elements size set correctly (the page, and the body) we can style our map DIV to be 100% high safe in the knowledge that it has enough information to render and the correct size and not 0 px high.
Part 1.3 The Meat Section
First of all, we have the scripts in the HEAD tag. The browser will load the head part of the HTML first and your scripts will be loaded before the page is fully rendered. Any functionality that you make available in your scripts should be available to the rest of the page when it comes to need it. This is generally the right way to do it.
The second script is a bit more complex, but should be easy to understand:
We create a new function called “initialize”.
Inside that function we create an object called myLatLng. We use the Google provided API google.maps.LatLng() to create an object which can be understood by the rest of the Google Maps API and pass in the co-ordinates of Barrow-in-Furness bus depot. We use “var” to limit that object’s “scope” to within the “initialize” function – that is to say, we won’t be able to get access to that particular myLatLng from other functions on the page.
There are loads of options, most of which we don’t need to worry about, so we’re just setting a few key options: where the map is centered, how much it is zoomed in, and the type of map we see. The map types are provided by Google as a set of constants, which are identifiable by being all in upper case. In our case we’re using SATELLITE, but we could also use HYBRID, ROADMAP or TERRAIN.
Once we’ve set up the various mapOptions we create a new var called “map” which is an instance of a Map object as provided by the Google APIs. We pass in to it the id of the HTML object where we want the map to appear, as we created in section 1.2, and we pass in the options var which we just created. This is enough information for the Google APIs to set up the map as we want it and put it on the page.
The last thing we do in our example is add a marker. A marker is the indicator which you use to highlight a point on the map. Google provide a lot of icons and colours for us to use, but the default is the red tear-drop one, so we’ll stick with that for now.
And that’s it. We’re done. We’ve got a map on the page centred at our chosen location, and there is a little marker to show a specific part of the map.
If you compare this to the original Beginners Guide I think you’ll say that this new version of the API is even easier to use. I will try and find time of the next few months to jot down a few notes on doing more interesting things with the map but I hope that this will get you started.