PC Pro blog » Google Maps

Displaying a location marker on a Google Map

Ian Devlin — Thu, 23 Dec 2010 12:54:54 +0000

One of the most popular features on websites today is a marker pinpointing a location on Google Maps. It’s incredibly easy to add such a map to a website and I’m going to show you how.

I said it was easy, and with the recent release of version 3 of the Google Maps JavaScript API, it’s become even easier. With the previous version of this API, you had to register your map to receive an API key, but that’s now no longer necessary.

Naturally Google provide a comprehensive guide to the Maps API, but I will run through the basics here.

Setting up the Map

First of all you need to include the map API in your web page. This is done by adding the following line in the element of your code:

You may notice the sensor parameter, which is set to false. This is a required parameter and should be set to “true” if the application used to determine the user’s location has a sensor device (e.g. a GPS locator). That’s not the case here, so we set it to false as shown.

Naturally, we need to define a map to display, but before we do that we need three things: somewhere on the web page to actually place the map, a default position to use as the map’s centre, and then some options to define the type of map that we require.

Setting up somewhere on the web page to place the map is a simple case of defining a div with a unique id, and some inline styling. So we have:

And that’s all we need.

To define a default position we need a latitude and longitude. There are plenty of websites out there that will convert addresses or places into coordinates for you, and I will centre this particular example on the PC Pro offices at latitude 51.515252 and longitude -0.189852. From these values a Google map position is defined by using the following:

var latlngPos = new google.maps.LatLng(51.515252, -0.189852);

We then set up the map options as follows:

var myOptions = {
   zoom: 10,
   center: latlngPos,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

Where zoom (naturally) indicates the zoom level of the map (you may want to play about with these to get the value that you want), center is set to the latitude/longitude position that we defined, and mapTypeId is set to the type of map that we wish to display initially. The map types are defined by the Google Maps API and are:

MapTypeId.ROADMAP displays the default road map view
MapTypeId.SATELLITE displays Google Earth satellite images
MapTypeId.HYBRID displays a mixture of normal and satellite views
MapTypeId.TERRAIN displays a physical map based on terrain information

Note: this simply defines the initial map type to display, the user can change it via a dropdown list that appears on the map itself. You can read more about the different map types over at Google should you want to know more.

With these things done, we can now initialise our map as follows:

var map = new google.maps.Map(document.getElementById("map"), myOptions);

This will now cause the map to appear on your web page, contained within the map div (the map itself stays within the boundaries of the div’s dimensions).

Marking the Location

With the map set up, we can now go about defining the marker on the map that we want displayed. Once again we need to define a position for the Google map using latitude and longitude. I’m using the same values as above, as I want to place a marker on the PC Pro offices (it’ll help the staff when they stumble back from their Christmas party).

var markerPos = new google.maps.LatLng(51.515252, -0.189852);

Adding a marker to this location is as simple as:

var marker = new google.maps.Marker({
   position: markerPos,
   map: map,
   title: "PC Pro Offices"
});

(where map is the id of the map div)

As usual I have a simple example so that you can see it in action. (Note: this example also uses some jQuery)

Going further

The Google Map API is very powerful and you can go much further than I have shown here, such as adding pop-up information windows on the map marker.

You can even use the API to convert addresses into latitude/longitude positions and display them on the map. I have included a more advanced example should you want to take a look at it. It’s pretty straightforward and I’ve commented the code in order to make it clearer.

Google and Rich Internet Applications (RIAs)

Tom Arah — Tue, 01 Sep 2009 11:09:15 +0000

Generally speaking, I’m not a fan of Google’s browser-native approach to web application development. Strategically I can see the advantages (wide and open access) and politically I think it’s admirable (open standards) but, in design terms, this lowest common denominator approach proves disastrous.

For example in a comparison between the barebones HTML-based Google Docs and the slick Flash-based Acrobat.com, I’d reserve the term RIA (rich internet application) for the latter and dismiss the former as a mere “web application” (more importantly I know which one I’d prefer to use).

Recently though I have to admit that Google caused my jaw to drop… and made me question the distinction.

Like most people I’ve become so used to Google Maps that I now take its extraordinary power for granted. I was forcefully reminded of just how amazing it is however, when I recently went to print out some directions. For the first time I noticed and clicked on the options in the print preview header to show maps and street views for each individual step (see example).

The latter capability in particular is extraordinary (assuming the area that you are interested in is covered by Street View). Being able to almost-instantaneously load in views of each junction that you are going to come across on your journey is breathtaking – especially as each street view is live and explorable (though thankfully that’s not generally necessary as Google automatically orientates the view based on the direction you’re travelling)

It certainly gave me pause for thought. If an application can cause you to say “oh that’s good, that’s really good” out loud, then surely it deserves to be called “rich”? In fact, if Google Maps isn’t a “rich internet application” then what on earth is?

It’s certainly a useful reminder of just how powerful the browser can be as a platform, but ultimately I think it’s worth preserving the distinction and reserving “RIA” for player-based applications (ie Flash / Silverlight). This isn’t just on practical grounds so that we know what we’re talking about. Google is clearly committed to making the browser as rich an environment as it can, but that’s rich in terms of content and functionality not in terms of design.

Indeed Google clearly prides itself on its cut-down, almost anti-design approach. This minimalist “anti-Flash” design works well for Google’s core applications such as Search and Maps where Google’s job is to help you get where you want to go as quickly as possible (indeed you could make the case that the street map mini-views are a flashy falling away from this principle). However for those applications – the majority – where you have to spend time consuming or producing content, this barebones approach backfires as it does with Google Docs.

Clearly content and functionality are crucial to the success of any project but ultimately I’d argue that the “rich” in RIA refers to design and that the distinguishing strength of a player-based approach is that it can offer a richer, tighter, more desktop-like user experience than the browser alone. The browser-based Google Maps is brilliant, but a player-based version could be better still.

———————–

PS. A quick practical postscript for web designers: Google recently introduced the ability to add Google Map directions to your own sites . The Directions gadget doesn’t offer street map views (currently), but it’s a seriously useful option to add to your How To Find Us pages. And it’s a great way to get your clients’ jaws dropping with a single line of code.

PPS. A quick impractical postscript: In spite of the directions and street views, I still managed to get hopelessly lost. Google Maps might be brilliant but it’s no replacement for Sat Nav.

Why OpenStreetMap is brilliant

Jonathan Bray — Wed, 29 Jul 2009 11:03:43 +0000

We all know about Google Maps and how brilliant it is. It’s gone from simple online mapping website, to an essential tool for mobile phones, complete with satellite photography, your friend’s location (Latitude) and, of course, the extremely groovy Street View.

But it’s not the only free mapping tool around, and not even the best, as I’ve been finding out over the past few months. The OpenStreetmap is a venture, started in 2004 by Steve Coast, similar to Wikipedia, only with maps.

His idea was that rather than rely on corporations with big budgets and teams of cartographers, or national institutions to generation mapping data, he would get the internet community to build up its own using GPS traces and donated satellite imagery.

I remember looking at it three years ago and being distinctly unimpressed at the level of detail. But, it’s improved beyond recognition, with maps of London, in particular, that are just as detailed, if not more so, than Google maps. And as time goes on, its accuracy and usefulness can only increase.

The really great thing about it though, is that the underlying map data is both free to use and manipulate. It comes under the Creative Commons Attribution-Share Alike 2.0 licence, and that approach is gradually beginning to bear fruit in the most wonderful of ways.

There are people working on all manner of projects, all across the world. There’s the OpenSeaMap project, aimed at mapping the shipping lanes and the like. Freemap is being developed for hikers in the UK. OpenRouteService.org is aimed at providing routing services, for cars, pedestrians and cyclists.

The most impressive, however, has to be OpenCycleMap.org, created by Andy Allan here in the UK. This boasts a cycle-specific view of the standard OpenStreetMap data, overlaying useful stuff such as where national and regional cycle routes are to be found, and where designated quiet routes run. It’s absolutely invaluable if, like me, you cycle a lot in town and don’t like sharing your ride with lorries and buses.

The open source nature of the OpenStreetMap and OpenCycleMap.org data means that it’s not only available online, though. It can also be repackaged and reused offline too.

The data’s already been re-engineered into Garmin-compatible format, so owners of eTrex and other recreational Garmin GPS units can download maps onto their devices for free. See here for links to the map files. There are even applications (mkgmap, for example) that let you generate your own Garmin-compatible maps, direct from the OpenStreetMap data.

And once you’ve got the maps on your device, there’s a whole host of other services to help you transfer routes and training data to overlay on the top of the maps. BikeRouteToaster uses OpenCycleMap to let you plan routes and then download those routes directly to your device, while GPSies focuses more on route-sharing. GPSies offers Google Maps as well as the OpenCycleMap for planning purposes.

I can’t help but be excited by all of this – and every week that goes by seems to throw up some another interesting development or avenue to explore. It can’t be long before some clever clogs somewhere produces a proper turn-by-turn in-car satnav application based on the free mapping data. Perhaps they already have…