Draw radius around a point in Google map

by

Using the Google Maps API V3, create a Circle object, then use bindTo() to tie it to the position of your Marker (since they are both google.maps.MVCObject instances).

// Create marker 
var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(53, -2.5),
  title: 'Some location'
});

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 16093,    // 10 miles in metres
  fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');

You can make it look just like the Google Latitude circle by changing the fillColor, strokeColor, strokeWeight etc (full API).

See more source code and example screenshots.

More Related Contents:

  1. Check if polygon is inside a polygon
  2. How can I check whether Google Maps is fully loaded?
  3. Verify if a point is Land or Water in Google Maps
  4. Google Maps v3 – limit viewable area and zoom level
  5. THREE.js generate UV coordinate
  6. How to make cross-domain AJAX calls to Google Maps API?
  7. Google maps API V3 – multiple markers on exact same spot
  8. How do I return a variable from Google Maps JavaScript geocoder callback?
  9. Google Maps: How to create a custom InfoWindow?
  10. How do I resize a Google Map with JavaScript after it has loaded?
  11. How can I get city name from a latitude and longitude point?
  12. Midpoint of route in google maps
  13. Convert long/lat to pixel x/y on a given picture
  14. JavaScript Load Order
  15. Display world map with no repeats
  16. Country specific zoom level in Google Maps API
  17. Convert lat/lon to pixel coordinate?
  18. Google Maps API v3: InfoWindow not sizing correctly
  19. Center Google Maps (V3) on browser resize (responsive)
  20. How to get address location from latitude and longitude in Google Map.? [closed]
  21. How can I calculate the area of a bezier curve?
  22. Calculate the bounding box’s X, Y, Height and Width of a rotated element via JavaScript
  23. How to detect if a point is in a Circle?
  24. Google Maps – Weird geometry.location attributes (G, K)
  25. How to trigger the onclick event of a marker on a Google Maps V3?
  26. Determine if point is within bounding box
  27. Integrating Google Maps in vue.js
  28. How can I tell if Google’s Streetview Image API Returns “Sorry, we have no imagery here” (ie. NULL) Result?
  29. Adding simple marker clusterer to google map
  30. Google maps API V3 method fitBounds()

Leave a Comment