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>
<head>
<title>Google Maps icons and circles revisted</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?key=YOUR_KEY&sensor=false"/>
<script src="scripts/maps.google.circleoverlay.js"
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
marker = new google.maps.Marker(
{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
);
},
/* loads the map */
load: function() {
// Create Map
var center = new google.maps.LatLng(52.026129,4.357066);
map = new google.maps.Map(document.getElementById("map"), {
center: center,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
this.showMarker(map.getCenter());
}
};
</script>
</head>
<body onload="IconsAndCircles.load()">
<div id="map" style="width: 100%; height: 500px; border: 1px solid #666666;"/>
</body>
</html>
After I wrote this code I found that Google also offers a way to create circles on a map in the Maps API. You might want to check out their example as well.
Servicelab.org 