This is the first in a series of posts I intend to do looking into some uses of the Google Maps Javascript API, V3. Let’s start at the very beginning – you want to display a map on a webpage, so what’s required. This is the bare minimum you need to do.
Add an empty <div> to your HTML page, with a suitable ID attribute:
<div id="map_canvas"></div>
Add some CSS like this:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
Include the Google Maps javascript file:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Create a javascript function that includes all the next few lines of code; let’s stick to convention and call it initialize.
Create a latlong object which indicates the latitude and longitude where your map is centred:
var homeLatlng = new google.maps.LatLng(51.42838,0.0); // London
If you don’t already know the latitude and longitude for where you want to place your map, there’s a very easy way to find out:
- Go to Google Maps
- Search for your desired destination, and zoom right in
- Right-click on the map at your destination, and choose the “What’s here?” option
- The latitude and longitude coordinates will appear in the search box
Create a structure with the following properties:
var myOptions = {
zoom: 10,
center: homeLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
The zoom value can be any integer between 0 (fully zoomed out) and about 18. Some cities will support zoom up to about 20, and there are isolated cases of parts of maps having a zoom level up to 23 or more! In general though you won’t want to zoom in that far. Typically I’d set this around 7 – 15 depending on what kind of map I’m displaying.
The center value uses the latlong object you already created.
The mapTypeId value can be one of four options:
- google.maps.MapTypeId.ROADMAP – normal street map
- google.maps.MapTypeId.SATELLITE – satellite photos (might not be available for all locations if you’re zoomed in too far)
- google.maps.MapTypeId.HYBRID – combination of a satellite map with streets overlaid on top
- google.maps.MapTypeId.TERRAIN – what it sounds like, indicates natural features, height of land etc
I generally stick with ROADMAP, as that’s the most typical map type you see by default. Here’s a demonstration of the different types:
Create a new map with the structure of options you just created, and specifying the DIV where you want the map to appear:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
That’s the end of your initialize function. You could just call this using the onload attribute of the body tag. Or if you were using jQuery, with $(document).ready(). However, Google has an event listener, that does the same thing:
google.maps.event.addDomListener(window, 'load', initialize);
Wrapping it all up, here’s the complete page for simply displaying a map at a given location:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API V3 lesson 1</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var homeLatlng = new google.maps.LatLng(51.476706,0); // London
var myOptions = {
zoom: 15,
center: homeLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
[...] previously showed how to create a very simple map. But usually you’ll want to do more than that. Let’s start with adding markers to the [...]
Pingback by Google Maps API – adding markers « Duncan’s blog — September 25, 2011 @ 12:07 pm |
[...] previously I showed how to create a basic map, then how to add markers to it. Now suppose you’re wanting to have one of those little [...]
Pingback by Google Maps API – infowindows « Duncan’s blog — October 8, 2011 @ 12:29 pm |
[...] now we’ve created a map, added markers and infowindows. Maybe you want to start drawing lines and shapes on [...]
Pingback by Google Maps API – polylines « Duncan’s blog — February 12, 2013 @ 6:43 pm |