Skip to content

Archive

Tag: Google Maps

Google Maps has evolved a little bit from just providing maps of Earth.

For a while now, Google Maps has also provided maps of the night sky as well, but did you know you can also use Google Maps to view the surface of the Moon and Mars as well.

You can read all about it on the Google Maps blog.

Now, where did you say those little green men had their colony on Mars again?

Share

I previously posted on how to create a map using Google Maps version 2. Google Maps version 3 offers a lot more features to choose from.

The Google Maps 3 API has also undergone a whole lot of fundamental changes. For one thing, you no longer need a Google Maps API key to use the library, and a lot of the objects have changed completely – so much so that code written for version 2 probably won’t work in version 3.

Anyway, so now how to give directions from an origin point to a destination.

So the first thing to do is include the API link – which, if you have seen the link for version 2, you will immediately notice how much simpler it is.

We then create the map, passing it parameters for the zoom level, map type and where to centre it. In this example we have chosen to set the map type to the street map, and the location to be centred on Cape Town.

We then create a DirectionsRenderer object, and set it’s map to use our map we created, and assign it an HTML element to render to. This object does all the hard work of displaying our directions.

We then create a DirectionsService object which we will use to actually find the route to our destination.

To find the route, we pass an array of parameters to the route function of the DirectionsService object, and pass on the results to the renderer.

In the parameters we need to specify the origin and destination, in a text format, much like an address. TravelMode is the method to calculate the route, which in this case is set to DRIVING (the other option here is WALKING). The UnitSystem defines whether we use metric or imperial, but in this case I have set it to METRIC. The last parameter specifies whether we want to provide alternative routes as well.

That is all there is to it. And the results…
Google Maps Directions
continue reading…

Share

It often feels like South Africa is way off the world map, being tucked away on the tip of Africa, far away from everyone. Well, Google at least know we are here.

They have announced Google Maps South Africa. Google Maps always used to cover South Africa too, but with this announcement, we finally get a host of new features available.

We are now able to get directions between locations, and businesses can add themselves to be listed as well.

The most contentious feature, but, in my view, the most fun, will be the street view. This is not yet implement, but is promised within the next few months, and I have already heard reports from people that they have spotted the Google street view car during around.

Now all I have to do is wait for the Google Maps Navigation software to become available for my phone, and I will be very happy…

Share

The major GPS navigation software companies are not liking Google very much. Google has released a new fully-featured navigation application called Google Maps Navigation which uses the data Google Maps has gather over the last few years, and combined it with a turn-by-turn navigation system, and then go and release all of this for free.

Garmin and Tomtom reacted badly on the stock market after that announcement, losing 16% and 20% of their value respectively in one day.

At the moment it is only available for Android 2.0 phones, but there are promises that it will be coming out on other platforms soon. When the windows Mobile version ships, I will certainly be getting my download…

Share

The first thing you need to be able to use the Google Maps API is an API key, which can be obtained from the Google Maps API site. This API key is unique to a domain (subfolder in a domain) and everything below that, so you only need one key to use the API from anywhere on your site, although to use the Google Maps API on a different site, you would need to get another key for that site.

Once you have the key, it is a rather easy affair to get an embedded Google map on your website.

The first step is to load the Javascript API using a standard script tag, using your API key as one of the parameters.

We then create a div, specifying an id, and set the width and height. Within this div, we put the Javascript to create the map.

A map is created using the GMap function, passing it the div which will contain the map.

We can then add a control panel, which will enable us to move around, and also zoom in and out, using the map.addControl() function. Some of the possible types of controls are GLargeMapControl3D, GLargeMapControl, GSmallControl, GSmallZoomControl and GSmallZoomControl3D.

We then need to add a control which enables us to set the map type, which is also added using the map.addControl() function. The map type control is GMapTypeControl.

Once we have created the map, we need to tell it where to point to, which in the case of the example is the Cape Town CBD, which is at 18.417 degrees east and 33.917 degrees south, using the map.centerAndZoom() function. The second parameter is the zoom level, which in this case is set to 3.

Finally, we create a marker, so that we can highlight the spot on which we are focused. We add a new marker with the map.addOverlay function.

	<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAARpAQilYXWb374JbdyaxLNxQ_Nb3DJA7JSD-nCmfDwG8IFuEtORTDhFCknXi3QqxAWC5lRIMIPuIghA" type="text/javascript"></script>
	<div id="map" style="width: 400px; height: 300px"></div>
	<script type="text/javascript">
		//<![CDATA[
		var map = new GMap(document.getElementById("map"));
		map.addControl(new GLargeMapControl3D());
		map.addControl(new GMapTypeControl());
		map.centerAndZoom(new GPoint(18.417, -33.917), 3);
		map.addOverlay(new GMarker(new GPoint(18.417, -33.917)));
		//]]>
	</script>

And once you got that code in place, you should be able to see this

Share