Charlie Calvert on Elvenware

Writing Code and Prose on Computers

Elvenware

Maps

Index

 

Some Sample Maps

Google Map Basics

The Google Maps allows you to write JavaScript code that accesses many of the features found on the traditional Google Maps website.

There are two Google Maps licenses, a free one for casual use, and a commercial license if you want to try to monetize your work:

When working with Google Maps that might be shown on mobile devices, be sure to set your viewport:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

Declare CSS that allows the map to fill the entire document:

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map { height: 100% }
</style>

Include the Google Api and a file of your own where you can do your work:

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

That's all you need to do so long as you have less than 25,000 loads a day. You no longer have to use a Google API key. You must, however, set sensor to true if you are attempting to determine the users location.

Initialize and Load the map

Here is a typical call to initialize a Google Maps object:

function loadMap()
{
	var latlng = new google.maps.LatLng(47.6609148, -122.1664568);
	var mapOptions = {
		zoom: 8,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	mapDiv = new google.maps.Map(document.getElementById("map"), mapOptions);
}

mapDiv which is a handle attached to a <div> in your HTML, is often a good variable to declare at some broad scope that other parts of your program can access it as needed. A MapTypeId can be set to one of four values:

Locations

To move to a location on the map you usually first create a LatLong object, where LatLong stands for latitude and longitude.

var location = new google.maps.LatLng(latitude, longitude);

A call to find Bellevue Colloge could look like this:

var location = new google.maps.LatLng(
  47.58436783281881, 
  -122.14824694772176);
mapDiv.setCenter(location);
mapDiv.setZoom(zoomLevel);

The call to setCenter focus the map on particular location. Zoom levels generally range between 0 and 21, where zero is zoomed way out, and 21 is a close zoom. A number between 7 and 15 is often a good choice if you want to be near a complex area of the map, but not too near.

Latittude and Longitude

Latitude, or parallels, move laterally around the globe. For instance, the equator is a line of latitude, as is the Tropic of Cancer and the Tropic of Capricorn.

The equator has a latitude of 0, the Tropic of Cancer has a latitude of approximately 23 degrees, the Arctic Circle of approximately 66 degrees and the North Pole of 90 degrees. Our latitude here in Seatle is about 48 degrees, so we are a little more than half way between the North Pole and the equator. Given that knowledge, then what would be the latitude that runs through the center of Texas? Would it be larger than 48? Less than 48? A key questions to ask, of course, is whether Texas is closer to the equator (a smaller latitude) or closer to the north pole (a larger latitude) than Washington State. Is it north or south of the Tropic of Cancer? Once you have that information firmly in hand, your first guess for the latitude of the north and south boundaries of Texas might be at least a ball park figure.

Thinking about Latitude

Figure 01: Lines of Latitude

Longitude runs the long way, from pole to pole. The mnemonic actually works, if you take a moment to think about it. The parallels are not all the same length. The equator is the longest, since it goes all the way around the globe. The tropics run a slightly shorter distance, and the artic circle is significantly shorter. Each line of longitude, however, runs from pole to pole, as if following the lines that separate the sections of an orange. Therefore the lines of longitude are, on balance, longer than the parallels.

We are at approximately longitude -122. Since Greenwich is 0, and the some point in the middle of the Pacific is 180, then we are about 2/3 of the way around the globe from England, moving east to west. Since the east coast is closer to England than Washington, that means its longitude is going to be what? Smaller or larger than ours? Try some experiments and find out. Does -100 degrees of longitude get you closer to England or further away?

And etc. Obviously using Google maps to just plug in the numbers is a sure fire way to get the numbers right. But if you want to understand maps, and if you care about mobile technology then you should care about maps, it helps if you start to get an intuitive sense of what latitude and longitude apply to various locations in the world reside.

Since Paris, France is just south of Greenwhich England will it be at a higher or lower parallel (latitude) than Greenwich? What about its longitude, is it likely to be a "big" number like "-122?" Or is it more likely to be a small number like 5, or even 2?

If a city is a latitude -20 and longitude 20, can you take a guess at where it might be?

Markers

Here is how to set one of those red flags or markers in the map:

var marker = new google.maps.Marker(
{
	position: darwin, 
	map: mapDiv,
	title:"Hello World!"
});

The following code creates an event handler that will be called when the user clicks on the marker created above:

google.maps.event.addListener(marker, 'click', function() 
{
	mapDiv.setZoom(10);
});

Responding to onclick Events

First you need to register your event handler with the map object:

google.maps.event.addListener(mapDiv, 'click', mapClick);

In this code mapDiv is the <div> object where you retrieved when creating your map. It is the <div> where the map is displayed.

You can respond to click events like this:

function mapClick(event) 
{
    alert("latitude: " + 
      event.latLng.lat() + 
      " longitude: " + 
      event.latLng.lng());
}