One of the most popular features on websites today is a marker pinpointing a location on Google Maps. It’s incredibly easy to add such a map to a website and I’m going to show you how.
I said it was easy, and with the recent release of version 3 of the Google Maps JavaScript API, it’s become even easier. With the previous version of this API, you had to register your map to receive an API key, but that’s now no longer necessary.
Naturally Google provide a comprehensive guide to the Maps API, but I will run through the basics here.
Setting up the Map
First of all you need to include the map API in your web page. This is done by adding the following line in the <head> element of your code:
<script
type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>You may notice the sensor parameter, which is set to false. This is a required parameter and should be set to “true” if the application used to determine the user’s location has a sensor device (e.g. a GPS locator). That’s not the case here, so we set it to false as shown.
Naturally, we need to define a map to display, but before we do that we need three things: somewhere on the web page to actually place the map, a default position to use as the map’s centre, and then some options to define the type of map that we require.
Setting up somewhere on the web page to place the map is a simple case of defining a div with a unique id, and some inline styling. So we have:
<div id="map" style="width:600px;
height:600px; margin-top:10px;"></div>And that’s all we need.
To define a default position we need a latitude and longitude. There are plenty of websites out there that will convert addresses or places into coordinates for you, and I will centre this particular example on the PC Pro offices at latitude 51.515252 and longitude -0.189852. From these values a Google map position is defined by using the following:
var latlngPos = new google.maps.LatLng(51.515252, -0.189852);We then set up the map options as follows:
var myOptions = {
zoom: 10,
center: latlngPos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};Where zoom (naturally) indicates the zoom level of the map (you may want to play about with these to get the value that you want), center is set to the latitude/longitude position that we defined, and mapTypeId is set to the type of map that we wish to display initially. The map types are defined by the Google Maps API and are:
- MapTypeId.ROADMAP displays the default road map view
- MapTypeId.SATELLITE displays Google Earth satellite images
- MapTypeId.HYBRID displays a mixture of normal and satellite views
- MapTypeId.TERRAIN displays a physical map based on terrain information
Note: this simply defines the initial map type to display, the user can change it via a dropdown list that appears on the map itself. You can read more about the different map types over at Google should you want to know more.
With these things done, we can now initialise our map as follows:
var map = new google.maps.Map(document.getElementById("map"), myOptions);This will now cause the map to appear on your web page, contained within the map div (the map itself stays within the boundaries of the div’s dimensions).
Marking the Location
With the map set up, we can now go about defining the marker on the map that we want displayed. Once again we need to define a position for the Google map using latitude and longitude. I’m using the same values as above, as I want to place a marker on the PC Pro offices (it’ll help the staff when they stumble back from their Christmas party).
var markerPos = new google.maps.LatLng(51.515252, -0.189852);Adding a marker to this location is as simple as:
var marker = new google.maps.Marker({
position: markerPos,
map: map,
title: "PC Pro Offices"
});(where map is the id of the map div)
As usual I have a simple example so that you can see it in action. (Note: this example also uses some jQuery)
Going further
The Google Map API is very powerful and you can go much further than I have shown here, such as adding pop-up information windows on the map marker.
You can even use the API to convert addresses into latitude/longitude positions and display them on the map. I have included a more advanced example should you want to take a look at it. It’s pretty straightforward and I’ve commented the code in order to make it clearer.
Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.
