Using the code from the Getting started with Google Maps article, I've setup a map view of the gorge:
<script src="http://maps.google.com/maps?file=api&v=2&key=***YOUR KEY HERE***" type="text/javascript"></script><script type="text/javascript">function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setMapType(G_SATELLITE_MAP);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(51.2863,-2.7503), 14);
// Extra code goes below this line
}
}</script><div id="map_canvas" style="width: 550px; height: 350px"></div><script type="text/javascript">function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(initialize);</script>This will display a nice map as shown in the image below.
Google Maps API Markers
Adding Markers to Google Maps
Markers are used to identify points on the map. All you need to do to add a basic marker is to add the two lines below to the code above. The previous article shows you how to get latitude and longitude from Google Maps.
var point = new GLatLng(51.282798,-2.765477);
map.addOverlay(new GMarker(point));This will show up as a simple red pin on the map. This will mark the start point of the walk (the car park).
Google Maps API Markers
You can change the icon from the default using some slightly different code. All this does is create an "option" parameter and adds it to the addOverlay function.
var point = new GLatLng(51.282798,-2.765477);
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
markerOptions = { icon:blueIcon };
map.addOverlay(new GMarker(point, markerOptions));Changing the Google Maps Pointer Icons
Sometimes you may want to add letters to identify specific points of interest on the map rather than the default dot. This can also be done quite easily using the code below.
var point = new GLatLng(51.282798,-2.765477);
var letteredIcon = new GIcon(G_DEFAULT_ICON);
letteredIcon.image = "http://www.google.com/mapfiles/markerA.png";
markerOptions = { icon:letteredIcon };
var marker = new GMarker(point, markerOptions);The image url points to Google markers, simply replace markerA.png with markerB.png, markerC.png and so on. The letter must be in upper case.
You can also host icons on your website and link to them, simply replace the google url with your own. Here is a great resource for downloading Google maps icons.
Adding Clickable Captions to Google Maps
The next logical step is to add a caption to the marker so people know what you are marking and why!
Having added the marker to the map, a caption can be added using Google API events as shown below.
var point = new GLatLng(51.282798,-2.765477);
var letteredIcon = new GIcon(G_DEFAULT_ICON);
letteredIcon.image = "http://www.google.com/mapfiles/markerA.png";
markerOptions = { icon:letteredIcon };
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("This is the carpark at the start of the route.");
});
map.addOverlay(marker);This should result in a map marker as shown below. Once clicked it will expand a caption bubble with your text.
Google Maps API Markers with Text
Adding Images
Why not add an image to the caption and show people what is there? I'm going to start adding these to my maps to show the routes walked and the views you can expect from each vantage point. The parameter to the call of openInfoWindowHtml simply takes in any html content, so you can add an image url to it as well and link it to the full size.
var point = new GLatLng(51.282798,-2.765477);
var letteredIcon = new GIcon(G_DEFAULT_ICON);
letteredIcon.image = "http://www.google.com/mapfiles/markerA.png";
markerOptions = { icon:letteredIcon };
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<p>This is the carpark at the start of the route.</p><img src='https://lonewolfonline.net/uploads/2010/03/cheddar-gorge-views-3-150x150.jpg'/>");
});
map.addOverlay(marker);
Adding Pictures to Google Maps
Adding Routes to Google Maps
The final thing I want to talk about today is adding routes to the map. Google calls these "polylines". All this is an array of points on the map. So let's create a short "polyline" route on the map. I'm not going to do it all because there are quite a few, hopefully it will be enough to get you started. The more points you add the more accurate the route will be.
var polyline = new GPolyline([
new GLatLng(51.282356,-2.767838),
new GLatLng(51.283308,-2.767269),
new GLatLng(51.285858,-2.765284),
new GLatLng(51.286301,-2.764576),
new GLatLng(51.286221,-2.763235),
new GLatLng(51.286556,-2.761851),
new GLatLng(51.288133,-2.75875),
new GLatLng(51.289757,-2.751369),
new GLatLng(51.28969,-2.745962),
new GLatLng(51.288737,-2.745565)
], "#00ff00",5);
map.addOverlay(polyline);In this example the value "#00ff00" represents a green line. You can change this to be any valid HTML hex colour value. The single digit at the end (5) tells Google how thick to draw the line in pixels. The end result should look something like this:
Google Maps Polylines and Routes
I love your tutorial.
I'm so reluctant to use Google for programming resources mainly because most examples are nothing more than borrowed information displayed in a non-common sense format.
Your examples were perfect, right to the point, easy to understand and even the cut and paste worked as shown!
Thank you, John Turcott
Brilliant tutorial, thanks!!
Thanks for this tutorial, it was a great help in getting me started within minutes!