Stiern

via Ad Packs

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!

346 comments

Leave one yourself

  1. Mike

    October 28, 2009 at 1:57 pm

    I like this project and I’m attempting to use it. I’ve got things working OK, but I have a large area with lots of buildings. I wanted to do multiple markers with multiple info windows. I made copies of the necessary code, changed the variables and it works, only the info windows won’t go away when someone clicks on the map or another marker. Can someone explain what I should be doing to make that happen?

  2. David

    October 27, 2009 at 10:09 pm

    I can not figure out how to make this popup window contentString displayed on load not on click…. any tips?

    BTW. Great article man.

  3. Google Local Seaches

    October 27, 2009 at 8:33 pm

    that was wonderfully explained. thanks for the walk-through, you discussed it in every single detail.

  4. Ubisan

    October 27, 2009 at 11:39 am

    Great post and really easy to follow.

    I reckon I’ll design some nice markers and replace the standard Google Maps feed with my own one in the very near future!

  5. kissmo

    October 26, 2009 at 4:08 pm

    Thanx for sharing….Really awesome..I ll try in my site..

  6. marius

    October 26, 2009 at 1:03 pm

    !!! There is an error message in IE6 and IE7 because of the trailing coma in this code bellow:

    var companyMarker = new google.maps.Marker({
    position: companyPos,
    map: map,
    icon: companyLogo,
    shadow: companyShadow,
    title:”Company Title”,
    });

    1. Peter

      October 26, 2009 at 3:10 pm

      Nice catch, marius! It’s corrected in the code now. Thanks.

  7. MattDunlap

    October 25, 2009 at 6:41 pm

    Love the blurred map… Makes it look deep.

  8. Vikram

    October 24, 2009 at 11:17 am

    Thanks, nice new concept.

  9. Tam Nguyen

    October 22, 2009 at 6:06 am

    Thanks man – great post… ^_^

  10. UpTrending

    October 21, 2009 at 6:16 pm

    Great post and a useful resource for web developers working with Google Maps. I’ve added the link to my blog here: http://www.andybrewer.com

  11. Partha Bhattacharya

    October 21, 2009 at 6:34 am

    Nicely explained, Peter…and there are some valuable comments too. Thanks.

  12. Saudinium

    October 20, 2009 at 10:57 pm

    This is awesome man! Thanks for sharing it with the rest of us!! God bless..

  13. Hos Robert

    October 20, 2009 at 10:30 pm

    Thanks a lot! Very usefull …

  14. Steffen

    October 19, 2009 at 4:38 pm

    Here’s a nice webtool for googlemaps coordinates: http://www.vivid-planet.com/sandkiste/google_maps_koordinaten/

    1. Peter

      October 19, 2009 at 5:53 pm

      That’s so cool! I’m definitely going to use that in the future!

  15. freddo

    October 19, 2009 at 1:03 pm

    thanks… its so usefull….

  16. Just Jennifer

    October 19, 2009 at 12:56 pm

    Great post. :D

  17. Barton

    October 19, 2009 at 10:27 am

    Nice and simple, good starter read…

  18. Fotografia lotnicza

    October 18, 2009 at 6:07 pm

    Well done. Easy to implement, very informative. I will add it to my aerial photography site. Thx.

  19. fastmanu

    October 18, 2009 at 4:18 pm

    Really nice… thanks a lot :)

  20. Matthias

    October 18, 2009 at 4:12 pm

    Nice and detailed! Thanks.

  21. Harsha M V

    October 17, 2009 at 9:50 pm

    wow. nice article. thanx a lot.

  22. anon

    October 17, 2009 at 7:28 pm

    Does it validate?

    1. Peter

      October 18, 2009 at 1:20 am

      If you put all the JavaScript in an external .js file, it should validate.

  23. Ratting Gergely

    October 17, 2009 at 7:03 pm

    Nice feature, good post. I’m sure I’ll use this on my pages. Thanks!

  24. Elcodigodebarras

    October 17, 2009 at 11:09 am

    For a long,long time I´ve been searching an clear and direct explanation for embebing this code and to get an personal custom map without lossing quality. Al last I found your web through STUMBLE UPON and Eureka . This is it.

    THANKS. FOR SHARE YOUR SKILLS WITH US, WITH THIS ACTION WE ARE GETTING AN INTERNET MORE FRIENDLY FOR ALL !

  25. ticacho

    October 16, 2009 at 4:28 pm

    Great explanation man ;)

    It’s very usefull

    Regards

  26. Baris

    October 16, 2009 at 12:26 pm

    I have added some code so I can map any address dynamically (for instance when I have more addresses in a database). Maybe it’s not the best coding, but it works for me.

    $gresult = file(‘http://maps.google.com/maps/geo?q=ADDRESS&output=csv&oe=utf8&sensor=false&key=GOOGLEKEY‘);
    list($gm_status,$gm_soort,$gm_lat,$gm_long) = split(“,”,$gresult[0]);

    ADDRESS = the address how google wants it in the URL, just like “1+Infinite Liip,+Cupertino,+CA+95014,+USA”. This address will come from your database.

    $gm_status is the status code, so you should check if this is 200.
    $gm_soort is the the accuracy, so you can decide when to show and not (I have mine set at > 4).
    $gm_lat and $gm_long are the lattitude/longitude which you can then use everywhere you need those.

    I hope it’s clear what I mean.

    1. foco

      October 31, 2009 at 12:06 am

      I am interested but is not clear enough for me.
      You mean that having an ADDRESS on the DB, request to google geocode in order to obtain de status, accuracy, latitude n longitude ($gm_soort,$gm_lat,$gm_long) and then probably Insert them into DB?

  27. Coogan

    October 16, 2009 at 3:02 am

    Hey man, great article. I’ve already knicked and implemented it on my own site. ;)

    Just one thing, for our less adept coders.
    You state the variable
    var companyLogo = new google.maps.MarkerImage(‘images/logo.png’…

    But then call on “icon: companyImage,” which would explain why some people might have some trouble getting their custom icons to display.

    Simply change “icon: companyImage,” to “icon: companyLogo,” and you’re all set. :)

    1. Peter

      October 16, 2009 at 10:02 am

      Aarh, I’m so sorry! That one totally slipped. Thanks, Coogan.

      Could you provide us with a link to your own site so we can see it?

  28. Viona

    October 15, 2009 at 10:31 pm

    This is fantastic! Just what I needed!

    I’ve implemented and tested with Firefox and Chrome, they work perfectly. However with IE6 (shitty browser, I know) it comes up with the following error:
    “Line: 21
    Char: 5
    Error: ‘google’ is undefined”
    when using your sample pages.

    Any idea how to fix that?

    1. Viona

      October 15, 2009 at 10:36 pm

      Do’h! Nevermind… IE was still using proxy settings of my work environment, while I’m bypassing proxy with Firefox and Chrome. Once that was fixed, it works :)

      Silly me… :)

      1. Peter

        October 16, 2009 at 10:03 am

        Ha ha, glad you made it work!

  29. WittWicky

    October 15, 2009 at 9:55 pm

    Everything worked except I’m having trouble displaying custom markers. Standard marker appears okay—custom marker doesn’t show at all. Try 174.132.190.8/~valcom99/map_code.txt to see the code.

    Thanks,
    WittWicky

    1. Peter

      October 16, 2009 at 10:04 am

      Hi WittWicky,

      When I visit your link, all I get is an empty TXT file…

      1. WittWicky

        October 16, 2009 at 5:50 pm

        Thanks for responding.

        That was the code relevant to the Google Map. The actual web site is http://174.132.190.8/~valcom99/portfolio.htm. I replaced the code with the sample code and it now works properly, but the text file contains code causing a marker display problem.

        WittWicky

      2. WittWicky

        October 16, 2009 at 6:00 pm

        Found the problem! It was the misnamed companyImage variable noted in Coogan’s comments shown above. All set now.

        1. Peter

          October 18, 2009 at 11:08 am

          Yeah, once again I’m sorry about that.

  30. Chris

    October 15, 2009 at 9:05 pm

    You could try OpenStreetMap.org. The maps are often better than Google and are truly free to use. The underlying data is available too.

    1. Peter

      October 16, 2009 at 10:05 am

      Hi Chris,

      Thanks, that looks pretty sweet!

  31. Craig Sorensen

    October 15, 2009 at 5:55 pm

    This stuff is getting easier and easier. I still like Google Maps the best though.

  32. 摇光

    October 15, 2009 at 12:25 pm

    what’s the Google Maps API use for?

  33. Tess Ledesma

    October 15, 2009 at 12:15 pm

    Educational. Nice to visit sites like yours. I have learned enough today. I will visit you again.

  34. Digital Dojo

    October 15, 2009 at 3:22 am

    awesome! very informative.

  35. Tek3D

    October 14, 2009 at 8:02 pm

    awesome. Thanks very much

  36. Background Check Inc

    October 14, 2009 at 6:31 pm

    Thank you! This is exactly what we were trying to figure out how to do with one of our applications. Then this morning I looked in Google Reader and there was this little RSS feed from the programming Gods.

    All kidding aside, this is kick ass and is exactly what we needed to make one of our apps for our clients more user friendly.

  37. Freddy

    October 14, 2009 at 6:18 pm

    Great post. I’ve been looking for a way to spice up and customize my clients’ maps.

  38. ozzysong

    October 14, 2009 at 3:49 pm

    Nice work!

    Very informative.

  39. Gajendra

    October 14, 2009 at 3:31 pm

    Great work !

  40. Web Designer

    October 14, 2009 at 2:23 pm

    very very useful and a well written tutorial.

    thanks for this.

  41. Oleg

    October 14, 2009 at 1:55 pm

    Yeah! Thanks a Lot! I used G maps API in past but not with teh custom logo.

  42. FoO Iskandar

    October 14, 2009 at 1:01 pm

    Great Article … thank’s

  43. markgt

    October 14, 2009 at 11:53 am

    very nice tut!
    straight to the point and easy to follow, with no fluff
    thanks! :-)

  44. Most Interesting Ideas

    October 14, 2009 at 10:41 am

    Amazing article. Thanks!

  45. d13t

    October 14, 2009 at 9:18 am

    I’ve succesfully implemented a directions to here option in the info balloon via this method: http://bit.ly/4DkHm
    There are some coding flaw in that script, but it’s not hard to figure out and get it to work AND style it.

    1. Peter

      October 14, 2009 at 10:52 am

      Hi there,

      That’s pretty cool, but unfortunately it will not work with Google Maps API v3 as it doesn’t support directions yet.

  46. Ricardo Zea

    October 13, 2009 at 8:35 pm

    Very nice article.

    You should have a “Send article to friend” link or something to send articles from your site to an e-mail address.

    Thanks.

    1. Peter

      October 13, 2009 at 11:52 pm

      Hi Ricardo,
      Thanks for your comment – the option is hereby added!

  47. URK

    October 13, 2009 at 7:08 pm

    Great post..

    Is there a way to instead of popping up the information box, make a “directions to here” link like in google maps? That would be a great feature –

    URK

    1. Peter

      October 14, 2009 at 12:15 am

      Hi URK,

      I am actually not sure about how to do that – it is possible, I just don’t know how to do it, but I’ll definitely look into it – it’s a very exciting idea!
      UPDATE: I found this post at the Google Maps API v3 Group, and it states that directions are not yet supported in version 3, but that they will be in a short period on time – and when that happens, I’ll post a tutorial on Stiern.com on how to implement it in our map!

  48. JT

    October 13, 2009 at 6:43 pm

    Great Tutorial!
    Is there a way to replace the map and add your own image to the viewport?

    Thanks

    JT

    1. Peter

      October 14, 2009 at 1:12 am

      Do you mean to use a custom map?

      1. JT

        October 14, 2009 at 3:37 am

        I have seen it done before on maps for things like amusement parks (sorry, I can’t remember which one). Custom maps would be a great addition.

        1. Peter

          October 18, 2009 at 11:09 am

          That sounds really cool. I’ll look into it!

  49. Robert

    October 13, 2009 at 3:35 pm

    Hi, excellent post, very useful thanks.

    I have a question for you: How can show track in map? or add a kml file?

    Regards.

    1. Peter

      October 13, 2009 at 4:17 pm

      Hi Robert, and thanks for your comment!

      With ‘track’ I assume you mean a ‘route’ – so you’re able to show your customers which way to go, right? I will return with another tutorial on this very soon!

      Regarding KML files from Google Earth – I’ll have to look into that, but I’ll let you know!

  50. cypherbox

    October 13, 2009 at 6:59 am

    Useful post. thanks!

Trackbacks

  1. Twitted by ResearchBuzz

    December 30, 2009 at 6:06 am

    [...] This post was Twitted by ResearchBuzz [...]

  2. Personalizar mapas de Google | Mailing Factory

    December 23, 2009 at 2:51 pm

    [...] Link: http://stiern.com/tutorials/adding-custom-google-maps-to-your-website  Cargando … [...]

  3. links for 2009-11-20 | HiRes Squad

    November 20, 2009 at 8:02 pm

    [...] Adding Custom Google Maps to Your Web­site · Stiern.com (tags: goo­gle­maps tuto­rial word­press) [...]

  4. Customized Google Maps on Your Website

    November 17, 2009 at 12:11 pm

    [...] lots, train or bus stations to your Google Maps? It‘s nice idea, isn’t it? Just follow the instructions on tutorial/demo page and you will be amused how easy is to customize your Google Map that will [...]

  5. Agregando Google Maps a tu sitio web | ubiraci.com

    November 9, 2009 at 11:39 pm

    [...] http://stiern.com/tutorials/adding-custom-google-maps-to-your-website [...]

  6. Chris Robson Design.co.uk » Custom google maps

    November 9, 2009 at 11:15 am

    [...] http://stiern.com/tutorials/adding-custom-google-maps-to-your-website Posted under Uncategorized by admin on Saturday 31 October 2009 at 2:51 pm [...]

  7. Блог-шоу - выпуск 30 - Продвижение сайтов, веб-дизайн и креатив

    November 7, 2009 at 5:56 pm

    [...] Adding Custom Google Maps to Your Website – отличный урок на английском о том, как вставить стильные карты Google Maps на свой сайт. [...]

  8. Google Maps API - Personaliza tu mapa - Añade tu negocio a GOOGLE MAPS | Smultron POTENCIA !!

    November 4, 2009 at 12:40 am

    [...] Fuente: Stiern [...]

  9. Twitted by n0unours

    November 1, 2009 at 2:23 am

    [...] This post was Twitted by n0unours [...]

  10. Insertar y personalizar Google Maps en tu sitio web - elWebmaster.com

    October 30, 2009 at 11:52 am

    [...] Fuente: Stiern [...]

  11. PixMedial — Design & Geek » Personaliza el Mapa de GoogleMaps

    October 23, 2009 at 8:24 pm

    [...] En el siguiente sitio indican como realizar tal tarea tan solo editando y agregando unas variables al codigo que nos entrega Googlemaps.Adding custom google maps to your website [...]

  12. Implementacija Google maps | T&R splet - internetne storitve

    October 22, 2009 at 11:26 pm

    [...] Vodič v angleščini, ki razkrije več kot osnovne možnosti, ki smo jih prikazali v našem vodiču [...]

  13. Friday Fix Oct 12 – 16 | Programming Blog

    October 21, 2009 at 7:21 pm

    [...] Adding Custom Google Maps to your Website – This is a cool little trick – STIERN [...]

  14. Daily Digest for October 21st | Mike Hayes

    October 21, 2009 at 1:24 pm

    [...] Shared Adding Custom Google Maps to Your Website | Stiern.com. [...]

  15. Teknologeek.com » Cómo Agregar Mapas Personalizados a tu Sitio Web o Blog

    October 21, 2009 at 9:13 am

    [...] Stiern tienen una Guía Paso a Paso (en inglés) de Cómo Agregar Mapas Personalizados  a tu Sitio Web. El artículo se acompaña de imágenes paso a paso por lo que si no entiendes muy bien el inglés [...]

  16. Resource Roundup | Andy Brewer

    October 20, 2009 at 3:22 pm

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

  17. Heti események | I build websites

    October 20, 2009 at 10:58 am

    [...] Shared Adding Custom Google Maps to Your Website | Stiern.com. [...]

  18. Embed Customised Google Maps into Your Website | Programming Blog

    October 19, 2009 at 6:31 pm

    [...] 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 [...]

  19. Персонализирана Google Maps във Web 2.0 Приложение | Web 2.0 Blog

    October 19, 2009 at 9:27 am

    [...] към картата, за да помогне на клиентите си още повече?  Adding Custom Google Maps to Your Website е твърде лесен и опростен  начин да направите [...]

  20. Tutorial per inserire una mappa personalizzata di Google nel nostro sito web

    October 19, 2009 at 9:04 am

    [...] Stiern: Un bellissimo Tutorial per inserire una mappa personalizzata di Google all’interno del nostro sito web. (Articolo in inglese) Continua a leggere… [...]

  21. Notable Tech Posts – 2009.10.18 | The Life of Lew Ayotte

    October 19, 2009 at 5:07 am

    [...] adding custom google maps to your website [...]

  22. Adding Google Maps to Your Website | blogfreakz.com

    October 18, 2009 at 8:04 pm

    [...] 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 [...]

  23. Google Maps API mini ceļvedis | onkulis.com

    October 18, 2009 at 6:01 pm

    [...] vairāk: http://stiern.com function DraugiemSay( title, url, titlePrefix ){ window.open( [...]

  24. Daily Digest for October 18th | More Than Scratch The Surface

    October 18, 2009 at 3:29 pm

    [...] Shared Adding Custom Google Maps to Your Website | Stiern.com [...]

  25. Embed Customised Google Maps into Your Website | trackteq.com

    October 18, 2009 at 9:01 am

    [...] logo, parking lots, sight stations to a map, in sequence to assistance a patron even more? Adding Custom Google Maps to Your Website is really elementary as well as easy, Stiern is starting to uncover we [...]

  26. AMB Album » Embed Customised Google Maps into Your Website

    October 18, 2009 at 12:29 am

    [...] 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 [...]

  27. Friday Fix Oct 12 – 16 | Master Design

    October 17, 2009 at 8:52 pm

    [...] Adding Custom Google Maps to your Website – This is a cool little trick – STIERN [...]

  28. links for 2009-10-17 « Giri’s Blogmarks

    October 17, 2009 at 8:03 pm

    [...] Adding Custom Google Maps to Your Website | Stiern.com (tags: google maps tutorials)   [...]

  29. Adding Custom Google Maps to Your Website | Stiern.com

    October 17, 2009 at 6:33 pm

    [...] posted here: Adding Custom Google Maps to Your Website | Stiern.com Comments0 Leave a Reply Click here to cancel [...]

  30. Embed Customised Google Maps into Your Website | Internet, Marketing, Enterprenuership

    October 17, 2009 at 4:05 pm

    [...] 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 [...]

  31. Cum pun în situl meu o hartă Google | CNET.ro

    October 17, 2009 at 1:28 pm

    [...] De exemplu pentru a arăta sediul firmei. Cât de greu este? Pornind de la un tutorial găsit aici am pus laolaltă liniile de cod necesare pentru a atinge strict acest scop: al afişării hărţii. [...]

  32. Aggiungere una google maps personalizzata nel proprio sito web - Caputo’s blog - Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

    October 17, 2009 at 1:06 pm

    [...] GOOGLE MAPS TUTORIAL [...]

  33. Friday Fix Oct 12 - 16

    October 16, 2009 at 2:39 pm

    [...] Adding Custom Google Maps to your Website – This is a cool little trick – STIERN [...]

  34. links for 2009-10-16

    October 16, 2009 at 2:01 pm

    [...] 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 (tags: webdesign) Posted in Delicious Links [...]

  35. links for 2009-10-15 « Boskabout

    October 15, 2009 at 8:05 pm

    [...] Adding Custom Google Maps to Your Website | Stiern.com 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. (tags: google maps webdesign api tutorial jquery design tutorials googlemaps) [...]

  36. The Barcus Family » links for 2009-10-15

    October 15, 2009 at 7:05 pm

    [...] Adding Custom Google Maps to Your Website | Stiern.com Pretty cool stuff! (tags: google webdesign tutorial) [...]

  37. links for 2009-10-15 | Glorified Monkey

    October 15, 2009 at 5:16 pm

    [...] Adding Custom Google Maps to Your Website | Stiern.com (tags: maps google googlemaps webdesign api tutorial design jquery) [...]

  38. polaris14551 | 摇光 » 在Google地图上标记地点

    October 15, 2009 at 3:04 pm

    [...] 完整教程请参考：http://stiern.com/tutorials/adding-custom-google-maps-to-your-website 有几个疑问： 1、作者在第一段提到的Google Maps API仅仅用于获取经纬度，可以不必这么复杂。 2、在Customizing the Markers段中，代码中的companyLogo应该替换为companyImage才对。这大概是作者不小心导致的。 以下是作者是提供的sample files。googlemaps [...]

  39. links for 2009-10-15 « Uncle Joe's House of Crazy

    October 15, 2009 at 3:03 pm

    [...] Adding Custom Google Maps to Your Website | Stiern.com (tags: maps google googlemaps webdesign api tutorial tutorials) October 15th, 2009 | Category: Deliciousness [...]

  40. Adding Custom Google Maps to Your Website | Stiern.com « gregsmithsays…

    October 15, 2009 at 2:26 pm

    [...] source : http://stiern.com/tutorials/adding-custom-google-m&#8230; Categories: Uncategorized Comments (0) Trackbacks (0) Leave a comment [...]

  41. links for 2009-10-14 « Donghai Ma

    October 15, 2009 at 6:07 am

    [...] Adding Custom Google Maps to Your Website | Stiern.com (tags: maps google googlemaps webdesign api tutorial design jquery) [...]

  42. TwittLink - Your headlines on Twitter

    October 15, 2009 at 1:39 am

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

  43. Del.icio.us op 14 oktober 2009 | Michel Vuijlsteke's weblog

    October 14, 2009 at 11:03 pm

    [...] – Adding Custom Google Maps to Your Website | Stiern.com The Google Maps API allows you to embed maps directly into your website. All it takes is a little [...]

  44. Seta Digital Blog » Blog Archive » links for 2009-10-14

    October 14, 2009 at 8:00 pm

    [...] Adding Custom Google Maps to Your Website | Stiern.com (tags: design howto googlemaps api custom geolocation) [...]

  45. Mittwoch, 14.10.09 – Web Tweets | abtwittern

    October 14, 2009 at 5:13 pm

    [...] Eine weitere detaillierte Anleitung zum Einfügen von angepassten Google Maps in die Webseite –LINK– [...]

  46. Bookmarks for October 3rd through October 14th |

    October 14, 2009 at 4:23 pm

    [...] Adding Custom Google Maps to Your Website | Stiern.com – [...]

  47. 28 top trending topics in webdesign, technology, development and seach engine optimization « Adrian Zyzik's Weblog

    October 14, 2009 at 12:39 pm

    [...] Adding Custom Google Maps to Your Website Stiern.com [...]

  48. Adding Custom Google Maps to Your Website | Stiern.com « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

    October 14, 2009 at 4:01 am

    [...] Adding Custom Google Maps to Your Website | Stiern.comstiern.com [...]

  49. Adding Custom Google Maps to Your Website | Stiern.com » Web Design

    October 13, 2009 at 9:03 pm

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

  50. Tweets that mention Adding Custom Google Maps to Your Website | Stiern.com -- Topsy.com

    October 13, 2009 at 1:34 pm

    [...] This post was mentioned on Twitter by Michel Lyra and Allegro Propaganda. Allegro Propaganda said: GoogleMaps customizado: http://bit.ly/fXpWt #googlemaps [...]

Leave a comment

Required

Required (will not be published)

or Twitter URL

Some HTML allowed. Spam is not.