Getting Started with the Google Maps API
In this tutorial series, I am going to show you how to incorporate Google Maps into your website, add pins to locations with balloon pop-ups, set waypoints and even add routes. We'll also see how you can get latitude and longitude coordinates in Google Maps.
Adverts Blocked Please disable AdBlocking software and allow me to set cookies so that I can continue providing free content and services.
The first thing you need to do is acquire a Google Maps API Key which is generated on your websites URL. This key is unique and can only be used on the website specified; however you can generate as many API keys as you like. In order to get an API key you will need a Google account. Head over to the Google Maps API Generator to get your key.
Once you have your key you can start to add a map to your pages.
The single most important line of code is that of loading the API. This can be done with the line below:
This will load the API from the Google servers.
The next thing to do is create a place holder on your page that will contain the map. In this example the place holder will be a div element with a width of 550px and a height of 350px. You can use your own dimensions and CSS for this.
<div id="map" style="width: 550px; height: 350px"></div>
And that's all the script you need to get a map.
Here is a xHTML skeleton containing the necessary code to display a map. You will only need to insert your API key.
Types of Map
You can control what type of map to show using the map.setMapType function. In this example I'm using G_SATELLITE_MAP which is Google's aerial photography. You can also use the values below.
- G_PHYSICAL_MAP - Normal Google Maps
- G_SATELLITE_MAP - Satellite Photography
- G_HYBRID_MAP - Hybrid Satellite with map overlay
You can set the map centre using map.setCenter and inserting the latitude and longitude coordinates for the location. The final number (12 in this example) is used to set the zoom level with 0 being zoomed out and 20 being maximum zoom.
How to get Latitude and Longitude from Google Maps
There are a few methods to get Latitude and Longitude coordinates from maps. The easiest is to right click on the map and select "What's Here?" which will re-centre the map and display the coordinates in the search text box. You may have to click on the green marker to get the lat/long coordinates to show.
This will cause a little dialogue box to pop up displaying the coordinates which can be copied and pasted into your code.
Adding Controls to the Map
There are a variety of controls you can add to the map including a zoom control, navigation control and map types. They can all be added using map.addControl function. These lines should all be placed after map.setCenter in the example above.
This will cause a small map control which has a small zoom and panning control which looks like the control below. To get any of the other views simply substitute it in place of GSmallMapControl. You can add more than one control by calling addControl again.
Last updated on: Wednesday 21st June 2017
There are no comments for this post. Be the first!