Skip to navigation

PCPro-Computing in the Real World Printed from

Register to receive our regular email newsletter at

The newsletter contains links to our latest PC news, product reviews, features and how-to guides, plus special offers and competitions.

// Home / Blogs

Posted on December 23rd, 2010 by Ian Devlin

Displaying a location marker on a Google Map

Google Map

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 <head> 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:

<div id="map" style="width:600px;
height:600px; margin-top:10px;"></div>

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.

Tags: , , ,

Posted in: How To, Real World Computing


Follow any responses to this entry through the RSS 2.0 feed.

You can skip to the end and leave a response. Pinging is currently not allowed.

4 Responses to “ Displaying a location marker on a Google Map ”

  1. Jag Says:
    December 27th, 2010 at 4:32 pm

    The biggest problem I have is that I use OS Grid References, not long/lat values. I havent found a good way of getting these to Google Maps yet.

  2. Ian Devlin Says:
    December 27th, 2010 at 7:09 pm

    Hi Jag, you could take a look here: and scroll down to the OSGridToLatLong() function which will convert an OS Grid Reference to a latitude and longitude value. Then you can feed that into the Google Maps API.

    I’ve not tested it myself, but I will aim to do so, and your feedback would be useful.

  3. Divy Singh Rathore Says:
    January 25th, 2014 at 12:49 pm

    Thanks. this script really works. Can you tell how to change color of pin pointing a region.

  4. deepu mishra Says:
    February 5th, 2014 at 10:19 am

    please help me how to add marker location on google map


Leave a Reply

Spam Protection by WP-SpamFree

* required fields

* Will not be published






Your email:

Your password:

remember me


Hitwise Top 10 Website 2010