Google Maps
The Google Maps service provides an easy way to add maps into your web page. The actual content of the map is defined by calling JavaScript functions within the main map script passing the values that define how you want the specific map to look. In this series of tutorials we will look at how to code the JavaScript to customise your map.
Get an API
The first step in being able to use Google Maps on your web page is to request an API code from Google that will allow the maps to display on your site.
The first step in being able to use Google Maps on your web page is to request an API code from Google that will allow the maps to display on your site.
Adding an Unobtrusive Map
The code Google suggest you use to add a map to your page mixes some JavaScript in with the HTML of your page unnecessarily. Before we start customising the map let's first fix the way we attach it into our page so that all our JavaScript can be kept separate from the HTML.
The code Google suggest you use to add a map to your page mixes some JavaScript in with the HTML of your page unnecessarily. Before we start customising the map let's first fix the way we attach it into our page so that all our JavaScript can be kept separate from the HTML.
Zooming In and Out
The simplest and least obvious thing that we can change in the way that a Google Map looks is the scale of the map. We change this by specifying the default zoom level when we create the map.
The simplest and least obvious thing that we can change in the way that a Google Map looks is the scale of the map. We change this by specifying the default zoom level when we create the map.
Latitude and Longitude
The easiest way (in terms of the amount of code required) to define what part of the world we want to show on the map is to specify the latitude and longitude.
The easiest way (in terms of the amount of code required) to define what part of the world we want to show on the map is to specify the latitude and longitude.
Adding a Marker
Placing one or more markers onto our map will identify the specific location(s) that we want people to be able to find by using the map.
Placing one or more markers onto our map will identify the specific location(s) that we want people to be able to find by using the map.
Adding a Description to a Marker
Adding a description to the marker(s) on our map will make it more obvious what the marker is identifying.
Adding a description to the marker(s) on our map will make it more obvious what the marker is identifying.
Visitor Move and Zoom Controls
Allow your visitors to interact with your Google map. The simplest way to do this is to add a move and zoom control to the top left corner of your map. Google supply two pre-build controls that make this really easy.
Allow your visitors to interact with your Google map. The simplest way to do this is to add a move and zoom control to the top left corner of your map. Google supply two pre-build controls that make this really easy.
Satellite Images
As well as maps, the Google Map service can also display satellite images of the selected location. Here's how to add a control to allow your visitor's to switch between the map and satellite views. You can also allow a hybrid view overlaying the map over the satellite image or you can remove that option if you don't want your visitors to use it.
As well as maps, the Google Map service can also display satellite images of the selected location. Here's how to add a control to allow your visitor's to switch between the map and satellite views. You can also allow a hybrid view overlaying the map over the satellite image or you can remove that option if you don't want your visitors to use it.
Multiple Maps
By using different variable names and combining the code in the right place we can place multiple maps onto the one page.
By using different variable names and combining the code in the right place we can place multiple maps onto the one page.