Creating a Web Page with a Map

There is more than one free way to create a map and include it on your website. Depending on the kind of map and what you want to mark on it, as well as your website capabilities and web knowledge you can use any of the below mentioned methods. This article will show you how to create a web page with a map by utilizing free resources available on the internet, as well as show you how to use them!

Benefits

• Easy to implement
• No JavaScript needed

Usage

Creating and using a map is as simple as creating an image yourself. For example:

<img src="http://maps.google.com/maps/api/staticmap?size=300x300&center=London,+UK&sensor=false" alt="Example map" width="300" height="300" />

click to enlarge

The minimal set of parameters above consists of:

• "size" - the size of the image to generate, e.g. WIDTHxHEIGHT; up to 640px x 640px
• "center" - the location to centre the map on
• "sensor=false" - the sensor parameter, should stay false unless the request comes from a GPS enabled device

Location for the map can be entered in two different ways. You can either use plain english address (just remember to urlencode it), or you can use the longitude and latitude values directly.

Some of the optional parameters you might find useful:

• "format" - the format of the returned image (values include: png8, png, png32, gif, jpg, jpg-baseline)
• "zoom" - from 0 (world view) to 21+ (individual buildings)

Markers

An extra option you can use with the static Google maps API is placing markers on your map. They can be used to highlight a specific location or locations on a single map.

<img src="http://maps.google.com/maps/api/staticmap?size=300x300&center=London,+UK&sensor=false&markers=color:red|label:A|Soho,+London,+UK&markers=color:blue|label:B|Newington,+London,+UK " alt="Example map with markers" />

click to enlarge

The format of the marker parameter:

color:red|label:A|Soho,+London,+UK

• "color" - hex code or one of the following: black, brown, green, purple, yellow, blue, gray, orange, red, white
• "label" - single character, A-Z or 0-9
• the two parameters above are followed by a list of locations (address or long/lat)

Additional details

Full documentation for all the parameters is available here.

Benefits

• Easy to use
• Best for US specific data
• Requires an iframe

Usage

click to enlarge

This tool can be especially useful if you are interested in demographics or business data for a US region. The service offers three types of maps:

• Demographic map
• Oil spill impact map
• Hazard map (global)

You can create your map here:

http://www.esri.com/software/mapping_for_everyone/make-a-map/index.htm

Once you have chosen the map type you can easily make the map by filling out the form underneath the preview screen.

click to enlarge

Benefits

• Requires some JavaScript knowledge
• Fully customizable
• Interactive maps

Usage

This is the more advanced way of building maps, and it requires a little bit of technical knowledge (especially if you want to build more complex maps), however in return you get a lot more flexibility, customization and most of all maps that can be interactive and dynamically updated if need be.

A good place to start is the tutorial available from Google.

To begin using the JavaScript Google Maps API you need to include the following on your page:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">

The sensor parameter like in the static maps should only be true if your website visitors are using a GPS enabled device (e.g. building a website for mobile phone users). Next make sure you have a div in you html code ready to receive the map image.

<div id="map_canvas" style="width: 300px; height: 300px"></div>

The width and height styles do not have to be defined inline, however the div needs to have it's dimensions defined for the map to work.

The map initialization is best done by a javascript function similar to the one below:

<script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }</script>

Worth noting is that the parameters for the map are similar to the parameters used by the static maps API.

Lastly you need to actually initialize the map once the page is finished loading. A simple way of doing tht is to call the initialize() function in the body tag:

<body onload="initialize()">

Or alternativelly if you are already using jQuery on your website:

<script type="text/javascript">$(function(){ initialize();});</script>

Additional details

The full Google Maps API documentation can be found here.