Stiern

Adding Custom Google Maps to Your Website

Maps are often placed on a company website to help customers find their way there. For that, Google Maps is excellent. But wouldn’t it be nice to add your company logo, parking lots, train stations, etc. to the map, to help the customer even more? It is very simple, and in this article I am going to show you how.

Before we start, check out what we are going to create:

Now, here is an overview:

Overview

Google Maps API

The Google Maps API allows you to embed maps directly into your website. All it takes is a little JavaScript, and for beautifying—a little CSS. Version 3 of the Google Maps API has just been released, and of course, that is what we will be using here. You can read the entire documentation over at Google Labs, and while you are there, be sure to get an API key.

Getting the Coordinates

As I do not expect you to know the precise coordinates of your location, I will explain a very quick way Google has provided to do this. When you know the exact address, you can put it in an URL of this form:

http://maps.google.com/maps/geo?q=1+Infinite Liip,+Cupertino,+CA+95014,+USA&output=csv&oe=utf8&sensor=false&key=your_google_maps_api_key

When you enter this in your address bar, you will see this:

The coordinates of Apple's head quarter in Cupertino

The coordinates of Apple's head quarter in Cupertino

The first number is the status code, and 200 means that everything is okay. The second number shows how accurate the address is—in this case the number is 8, which is good. The last two numbers are latitudes and longitudes, which are the numbers we need.

Adding the Map to Your Website

There’s no need to hesitate – let’s add that map to your website! Open your favorite HTML editor and create a standard HTML file with UTF-8 encoding. First of all, we have to create the viewport and tell our HTML file to get the JavaScript file from Google Code. Add these lines between <head> and </head>:

1
2
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

After the URL, you will notice sensor=false. As we do not use any sensor, such as a GPS, to locate the location, this is set to false.

Just below what we have just inserted, write the following:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
	function initialize() {
		var latlng = new google.maps.LatLng(57.0442, 9.9116);
		var settings = {
			zoom: 15,
			center: latlng,
			mapTypeControl: true,
			mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
			navigationControl: true,
			navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
			mapTypeId: google.maps.MapTypeId.ROADMAP
    };

Let’s split this up to ensure that we understand it fully. In line 2 we create the function initialize(). Inside this function we are going to define the basic settings of the map. In line 3 we create a new variable, latlng. latlng stands for latitudes and longitudes. The variable contains the coordinates we’re going to use as the center of our map.
After that, we create the variable settings. You have a lot of options here.

zoom specifies—you guessed it—how far the map will be zoomed in. Play around with the number to get it to fit your location.

center specifies our center. By writing latlng, we refer to the variable we created earlier, and the coordinate inside that will be used.

The last code changes the layout of the map to a bit more minimalistic look in my opinion. The controls in the upper right corner (Map, Satellite, Terrain) are changed to a drop down menu, and the scaling/navigation controls in the left size are changed to small controls.

mapTypeId: google.maps.MapTypeId.ROADMAP defines that our map should be of the type ROADMAP – you can change this to either SATELLITE, HYBRID or TERRAIN.

Below the previous code, write this:

1
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

This code creates the variable map, and defines that the map should use the settings we just created.

Write

1
2
}
</script>

to end the function, and move to <body>, and write this:

1
2
3
<body onload="initialize()">
  <div id="map_canvas" style="width:800px; height:500px"></div>
</body>

By doing this we are telling our site to execute the initialize() function when the site is loaded, and insert a <div> with the size we want our map to be.

Try to view your site now. Cool, isn’t it?

Adding Markers

Now we have to add some markers. Let’s start by creating a standard marker—we’ll customize it in a moment.

Right below

1
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

insert the following code:

1
2
3
4
5
6
  var companyPos = new google.maps.LatLng(57.0442, 9.9116);
  var companyMarker = new google.maps.Marker({
      position: companyPos,
      map: map,
      title:"Some title"
  });

Try to update your page, and watch the magic. So, what have we done?

First, we create the variable companyPos, where we specify the position of the marker. Next, we create the marker itself using the variable companyMarker. You can add more settings than these, but we will get to that later. These settings are fairly logical, so I won’t go into more depth with them.

Customizing the Markers

Even though this could be enough to show your customer how to find you, we can still make it a lot nicer. Create an image in Photoshop with the size 100×50 pixels, and create something similar to this:

Create your logo

Create your logo

Next, create a shadow for your image:

The logo shadow

The logo shadow

To add these images as a marker instead of the standard marker, change the marker code to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var companyLogo = new google.maps.MarkerImage('images/logo.png',
	new google.maps.Size(100,50),
	new google.maps.Point(0,0),
	new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png',
	new google.maps.Size(130,50),
	new google.maps.Point(0,0),
	new google.maps.Point(65, 50)
);
var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
	position: companyPos,
	map: map,
	icon: companyLogo,
	shadow: companyShadow,
	title:"Company Title"
});

What we have done here is also really simple. The variable companyImage points to the name of the logo image. Then it defines the size of the image, the origin of the image, and the tip of the image (where the image will be attached to the coordinate). Next, we do the exact same thing for the shadow in the variable companyShadow. In our companyMarker variable we add icon and shadow, and that is basically it.

Now, if you refresh your site, you will se that the marker has changed into your own logo with an added shadow to it as well. To add more markers, you just follow the same method (remember to change the names of the variables).

If you have two markers very close to each other, you might want to add some z-index. The marker with the highest z-index, is the one on top:

Adding zIndex allows you to choose which marker should be on top

Adding zIndex allows you to choose which marker should be on top

1
2
3
4
5
6
7
8
var companyMarker = new google.maps.Marker({
	position: companyPos,
	map: map,
	icon: companyImage,
	shadow: companyShadow,
	title:"Høgenhaug",
	zIndex: 4
});

Adding Infoboxes

To add a description of your company when the visitor clicks on the logo we can add a infobox. With the Google Maps API it’s peace of cake.

Clicking your company logo will bring up an infobox

Clicking your company logo will bring up an infobox

Paste this code right after you define the map variable:

1
2
3
4
5
6
7
8
9
10
11
12
var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
    '<div id="bodyContent">'+
    '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
    '</div>'+
    '</div>';
 
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

The code here is fairly straight-forward, and you are of course not limited to headlines and paragraphs – there is room for images as well. To make the infobox appear when your logo is clicked, simply add this code right before the last } in the initialize() function:

1
2
3
google.maps.event.addListener(companyMarker, 'click', function() {
  infowindow.open(map,companyMarker);
});

To make the infobox just a little more pretty, add some styles in your stylesheet file:

1
2
3
4
body {
	font-family: Helvetica, Arial, sans-serif;
	font-size:10pt;
}

And there you have it. One piece of fine-looking Google Map to include on your company website, your travel blog, etc.

Download

If you’d like to download the sample files, you can get ‘em right here. Be sure to leave a comment!

499 comments

Leave one yourself

  1. you said to paste the code for adding the infoboxes right after you define the map variable but didnt you difine the map variable inside the head tag? my editor is saying i shouldnt use div tags inside the head and it isnt working. what am i doing wrong? everything else is working just fine. i just cant get the infoboxes up. thanks. great post.

  2. very much useful bro…thankzzz

  3. Sir, Thanks for the post and it worked for me.

    But The Issue is that In one Of My page I want to put the map for 2 times Like : in contact Us page its In right side also in footer.

    And there I got the isssue. It wont work due to same id “map_canvas” used double in one page…. Or for any other issue. Pls help me find solution.

    Regards
    Lokanath Nayak

  4. Sounds stupid and I’m sure i’m overlooking a really obvious mark but how would I add an info box to a second, third and so on marker?

    Somebody did previously mention ‘change the name of the infowindow variable’ but I’m new to coding and don’t know exactly what that means?

    Anybody got any ideas?

    Many thanks.

Trackbacks

  1. […] Fast and easy tutorial about adding custom Google Maps to website – gMaps API v3 […]

  2. […] Stiern.com » Adding Custom Google Maps to Your Website August 11, 2010 Leave a reply […]

  3. […] company logo, parking lots, train stations to the map, in order to help the customer even more? Adding Custom Google Maps to Your Website is very simple and easy, Stiern is going to show you […]

  4. […] your company logo, parking lots, train stations, etc. to the map, to help the customer even more? Adding Custom Google Maps to Your Website is very simple, and Stiern going to show you […]

  5. […] Maps API3 – InfoWindowsGoogle Maps API3 – Mobile devicesOther useful tutorialsAdding Custom Google Map to your websiteSimple Multiple Marker ExampleAdding Markers to a Map Using the Google Maps API 3 and jQueryUseful […]

  6. 14个Google地图的JavaScript资源 - 博客 - 伯乐在线

    October 30, 2011 at 9:11 am

    […] Adding Custom Google Map to your website […]

  7. […] Adding Custom Google Maps to Your Website | Stiern […]

  8. […] Adding Custom Google Map to your website […]

  9. Google Maps mashup with Directions on your website | | Digital ValdostaDigital Valdosta

    August 11, 2011 at 3:19 pm

    […] some help from this link I was able to get a great foundation for creating the mashup. This entry was posted in […]

  10. […] #6 Custom Google Maps to your website […]

  11. Links to grow business « Graphic Insights

    March 27, 2011 at 11:09 pm

    […] custom google maps […]

  12. Adding Custom Google Maps to Y… | System Green

    March 13, 2011 at 1:57 pm

    […] Custom Google Maps to Your Website – http://stiern.com/tutorials/adding-custom-google-maps-to-your-website Posted in: Uncategorized   Tags: […]

  13. Chris Paul » Blog Archive » October 13, 2009 sweet links

    October 19, 2010 at 5:04 am

    […] Adding Custom Google Maps to Your Website […]

  14. 在網頁內嵌的 Google 地圖顯示自製 Logo « Jamyy's Weblog

    June 28, 2010 at 10:28 am

    […] Adding Custom Google Maps to Your Website :javascript, webRelated Posts:WordPress 3.0 Multisite 實作在 Linux 透過 status.net API […]

  15. […] Adding Custom Google Maps to Your Website · Stiern.com – a nice tutorial on customising Google Maps and their markers for your website […]

  16. […] This is true – but with a bit more work you can create a fancy map mashup for you site. This tutorial by Peter Steen Høgenhaug helps you do more with your Google Maps Mashup. Peter helps you put your company logo and areas of […]

  17. Custom Google Maps | Web Dev Quickies

    January 28, 2010 at 5:41 am

    […] while looking into Google Maps and its API I stumbled upon an article by Peter Shoeg, a writer at stiern.com, who details the customization of Google Maps and how to add your own branding to them. The […]

  18. Twitted by omone

    January 3, 2010 at 5:11 pm

    […] This post was Twitted by omone […]

  19. jQuery pageSlide | WebDesignExpert.Me

    December 31, 2009 at 2:34 pm

    […] Adding Custom Google Maps to your website – Link. […]