Objects, methods and properties

The map object has a range of methods and properties that you can use to work with it and there are a range of auxiliary objects which are designed to make it all easier. 

For example, the map's SetCenter method will move the map location to the specified latitude and longitude. In turn the latitude and longitude are specified as a suitably initialised LatLng object which we have already used in the first map.

The easiest way to make sure you understand this is via a simple example:

If you add a button to the web page:

<input id="Button1"
     type="button"
    value="button"
  onclick="Button1_onclick()" />

and the following click event handler:

function Button1_onclick()
{
 map.setCenter(
       new google.maps.LatLng(55, -1.5));
}

then clicking the button re-centres the map on 55N, 1.5W..

You can adjust all of the other viewing parameters using similar methods and objects – just check the online documentation.

For example there is a setOptions and a setZoom method and so on. To try this out change the button's click event handler to read:

function Button1_onclick()
{
 map.setOptions({
   zoom:13,
   center:new google.maps.LatLng(55, -1.5),
   mapTypeId:google.maps.MapTypeId.SATELLITE});
}

As well as get methods there are also get methods that can be used to retrieve current settings.

Pushpins (Markers)

Moving on from simply panning, zooming and generally controlling the map view it is also possible to add pushpin markers. This is just a matter of creating a Marker object and customising it using its options object.

For example, to place a pushpin at the location used in the previous example:

marker1 = new google.maps.Marker({
   position:new google.maps.LatLng(55, -1.5),
   map: map
});

The options object has a number of possible fields but you have to specify position. The map field specifies the map object that the Marker is added to.

If you want to you can do this as a two step procedure.

First create the basic marker and then customise it:

marker1 = new google.maps.Marker();
marker1.setPosition(
          new google.maps.LatLng(55, -1.5));
marker1.setMap(map);

This approach allows you to keep a reference to a marker and hence change them after they have been created and add them to the map when you are ready.

On the subject of changing Markers - it is worth noting that Markers are fixed by default which means that a user cannot modify your placement by dragging.

To make a Marker draggable use:

marker1.setDraggable(true);

There are lots of other properties you can set and there are corresponding get methods.

You can use a custom graphic for the push pin simply by setting the setIcon method to a URL that designates the file to be loaded. For example:

marker1.setIcon("http:\\myserver\mypic.png");

MarkerImages are more versatile than simple Markers and you can use them to create markers that are have custom hotspots for clicking and location. 

What Else?

You can also draw on the map using Polylines and Polygons and you can create shapes which are photos and full 3D models.

You can also use the AddShape method to add an array of objects and the DeleteShape method removes shapes. Shapes can also be organised into layers.

Working with the map control is just a matter of figuring out which methods and properties affect the feature you are trying to control. You can do most of the things that a Google Maps user can, including planning a route and finding locations.

My advice is to read through the methods and properties of the Map object, which is the central object in the system, and investigate any of the methods and properties that interest you. Often this will involve finding out how some auxiliary object works that is used as a parameter in the method.

In most cases extending Google Maps is a matter of adding shapes, objects and other graphics at various locations. Sometimes you might want to add a more advanced facility and in this case it helps to copy the same approach used by Google i.e. create JavaScript objects which manipulate the DOM.  You can use this method to control even the parts of the DOM that the map object uses and so change the look of things like markers in code or in CSS.

There are other mapping services that you can use in the same general way as the Map control.

You can use the

• Geocoding API to find the location of an address
• Directions API to get directions from A to B
• Elevation API give you the height of any location
• Distance Matrix gives you distances and time to travel between a set of loctions
• Time Zone API to find the time zone for any location
• Places API to find out information about a location

The all work in more or less the same way with the tiny added complication of usually returning data as a JSON object - but this is very easy to work with. 

<ASIN:1846288266>

<ASIN:1590597079>

<ASIN:0321525590>

<ASIN:1934356069>