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

Advertisements
This entry was posted in programming and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s