In version 2.0 you could add the folowwing JavaScript to your theme:
jQuery(document).ready(function($) {
// Map
$(".pgm").bind("pronamic-google-maps-ready", function(event, map) {
var marker = $(this).data("google-maps-marker");
var circle = new google.maps.Circle({
map: map ,
radius: 300000 // 3000 km
});
// Since Circle and Marker both extend MVCObject, you can bind them
// together using MVCObject's bindTo() method. Here, we're binding
// the Circle's center to the Marker's position.
// http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
circle.bindTo('center', marker, 'position');
// Remove marker if you want to
marker.setMap(null);
});
});
We will launch version 2.0 this week.
Thanks for the response. I really look forward to being able to add this feature. Your map was the best one available. Glad to see you actively responding to questions here! Really looking forward to the launch.
Also….would I just need to paste that into the custom css? Thanks.
The code i posted is ‘custom’ JavaScript, not CSS. You should probably add it to the <head> section of your website / theme. Version 2.0 is now available for download, good luck!
I updated to 2.0. I just can’t find where the <head> is located. All I can find are php and css. Sorry for the noob questions.
Normally you can find the <head> section in your theme directory in the file “header.php”. You can add the code above between the <script type=”text/javascript”>…</script> tags.
Better is to add the script in a separate JavaScript file (.js) and add an wp_enqueue_script() function call to your theme functions.php file.
If that’s too complicated, I suggest you hire an web designer.
Got it to work. Thanks.
What would I need to do in order to change the thickness of the circle border and change the color from black to another color?
Thanks for your help.
Also, one last question, my map always show dotted lines or grids throughout, is there a way to remove that?
Thanks for all your help.
You should take a look at the Google Maps API V3 documentation:
http://code.google.com/intl/nl/apis/maps/documentation/javascript/reference.html#CircleOptions
An hint:
new google.maps.Circle({
strokeWeight: 2
});
I’m not sure wat you mean with the dotted lines or grids you see throughout.
The dotted lines can be seen here.
Thanks.
