Custom Icons with the Google Maps API V3

Putting a map on your website is pretty easy. The easiest way is to go to Google Maps and find the location you want, click embed, then copy and paste the code onto your site. This creates an iFrame on your site, which isn’t bad, but isn’t the most flexible either.

If you are feeling brave, you can put a map on your website with the API that Google provides. It’s all javascript code that works on every modern browser. The API is extremely well documented, so I won’t get down to the complete process of setting up a map, because this blog post is about using custom icons for your markers.

Click through to read how.

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var map;
var infowindow;
 
function initialize() {
    var markers = new Array();
    var pins = new Array();
    var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
    map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
}
</script>

That little block of javascript should replace the content of a div with the id of “#googleMap”. It also created to empty arrays to hold your markers and pins. I store all my LatLng objects inside that pins array, and use those pins as the position for my markers. By default, Google puts a little red circular pointer that I’m sure you are familiar with. Let’s make a marker for Portland, OR.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var map;
var infowindow;
 
function initialize() {
    var markers = new Array();
    var pins = new Array();
    var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
    map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
 
    pins[0] = new google.maps.LatLng(45.5234515,-122.6762071);
    markers[0] = new google.maps.Marker({ position: pins[0], map: map, title: 'Portland, Oregon' });
}
</script>

This code puts that familiar red circle marker on Portland. I have made a custom image, and have uploaded it to my web server. Now I’m going to se up a new javascript variable called icon, and it will hold both the path to the image, and a XY coordinate so that the maps API knows where the tip of the marker is. If you don’t set up the coordinate, it will assume the bottom center is the correct point on your custom marker. Here’s that code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var map;
var infowindow;
 
function initialize() {
    var markers = new Array();
    var pins = new Array();
    var icon = new google.maps.MarkerImage("http://www.nineteenfortyone.com/wp-content/uploads/portlandMarker.png", null, null, new google.maps.Point(69,236));
    var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
    map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
 
    pins[0] = new google.maps.LatLng(45.5234515,-122.6762071);
    markers[0] = new google.maps.Marker({ position: pins[0], map: map, title: 'Portland, Oregon', icon: icon });
}
</script>

Note lines 9 and 14.

Last but not least let’s put some bounds in there to bring the map to the right spots, and then we are done!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var map;
var infowindow;
 
function initialize() {
    var markers = new Array();
    var pins = new Array();
    var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(25.8,-120.9), new google.maps.LatLng(49.8,-71.1));
    var icon = new google.maps.MarkerImage("http://www.nineteenfortyone.com/wp-content/uploads/portlandMarker.png", null, null, new google.maps.Point(69,236));
    var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
    map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
    map.fitBounds(bounds);
 
    pins[0] = new google.maps.LatLng(45.5234515,-122.6762071);
    markers[0] = new google.maps.Marker({ position: pins[0], map: map, title: 'Portland, Oregon', icon: icon });
}
</script>

Here is the result:


This entry was posted by on Tuesday, November 16th, 2010 at 1:10 pm and is filed under Code Logic. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Tags: , , , ,

2 Responses to “Custom Icons with the Google Maps API V3”

 
  1. Uggs says:
    December 10, 2011 at 12:01 am

    A person essentially assist to make severely posts I would state. That is the very first time I frequented your web page and so far? I amazed with the research you made to make this particular publish incredible. Wonderful task!

  2. Google sniper Business shop says:
    April 21, 2013 at 6:51 am

    I will immediately snatch your rss as I can’t in finding your e-mail subscription link or e-newsletter service. Do you’ve any? Please permit me realize so that I could subscribe. Thanks.

 

Leave a Reply