How to draw multiple circles on your Google Map.

The problem:  I have a Wordpress website and I want to display a map with multiple placemarkers and have circles displayed over the placemarkers.


The solution. 

Firstly I installed this plugin on my Wordpress installation

Google Maps V3 Shortcode Multiple Markers for Wordpress .  This plugin enables you to put multiple placemarkers on your Google Map.  

In adding the circles to the placemarkers I found this example code a great help . 
Example of how to place Circles on Placemarkers in Google Maps

The key code is here
[code]
// Add a Circle overlay to the map.
        var circle = new google.maps.Circle({
          map: map,
          radius: 3000000 // 3000 km
        });
circle.bindTo('center', marker, 'position');
[/code]

So now all we need to do is intergrate that into the plugin .  Although you'll probably want to turn down the size of that radius.  Here's what I did to the site I'm working on.

After you've installed the plugin as I've recommended above then .

OPEN wp-content/plugins/google-maps-v3-shortcode-multiple-markers/Google-Maps-v3-Shortcode-multiplemarkers.php

there are 2 instances of

$returnme .=' var marker = new google.maps.Marker({

look for the code

$returnme .= ' html: site[2] });
   ';

underneath those commands.  After this add

[code]

    //  adding the circle code // littleripples.com
     $returnme .= "// Add a Circle overlay to the map. - // start
        var circle = new google.maps.Circle({
          map: MultipleMarkerMapDemo,
          radius: 50000 // 3000 km
        });/**/
        circle.bindTo('center', marker, 'position');";
   

[/code]


SAVE -> UPLOAD

and thats it :)