## Google Maps icons and circles revisited

Recently I needed to add icons and circles to a Google Map. My colleague Jan Sipke did a nice write up on this topic a couple of years ago. Unfortunatly things did change since then. Google released a new version of the Maps API (3.8 at the time of writing) and the resources that were used in his writeup moved to new locations. That why I decided to write an update on his story.

I wanted to achieve something like this:

I downloaded the icon from the same source as Jan Sipke did: The Map Icons Collection.

Only the site moved to a new location. The site features a great set of nice icons you can use on Google Maps. Check them out!

I used Matt Williamson’s Google Maps Circle Overlays to draw the circles. This script uses miles for the radius of the circle. I wanted to use kilo meters and made a simple function that converts kilo meters into miles.

The following code wraps this all up into the result I was looking for:

```<!DOCTYPE html>
<html>
<title>Google Maps icons and circles revisted</title>
<script type="text/javascript"
type="text/javascript"/>

<script type="text/javascript">
var IconsAndCircles = {
map: null,
KMS_THAT_MAKE_A_MILE: 1.609344,

/* converts a distances in kilo meters into miles */
kmToMiles: function(distanceInKm) {
return distanceInKm / this.KMS_THAT_MAKE_A_MILE;
}

/* show a maker on the map */
showMarker: function(point) {

// create a marker with an icon
{position: point, map: map, icon: 'res/wifi.png'}
);

// Create and add a circle for 200 meters
new CircleOverlay(
map, point, this.kmToMiles(0.2),
"#0000FF", 0, 1, '#0000FF', 0.10
);

// Create and add a circle for 50 meters
new CircleOverlay(
map, point, this.kmToMiles(0.05),
"#0000FF", 0, 1, '#0000AA', 0.25
);
},

// Create Map
center: center,
zoom: 16,
});
this.showMarker(map.getCenter());
}
};
</script>