Comment faire de cercle de rayon dans Google Maps?

J'aurais besoin de mettre en place dans notre application un cercle de rayon dans Google Maps, quelque chose comme
Comment faire de cercle de rayon dans Google Maps? (rose cercle de rayon).

De la meilleure façon que j'aurais besoin de spécifier quelle taille en miles avec le rayon. Notre application est écrite en Ruby on Rails, je pense que sera préférable d'utiliser Javascript ou un bijou.

Merci beaucoup!

EDIT: Tentatives:

var map;
    var miles = 3;
    function initialize() {
      var mapOptions = new google.maps.Circle({
          center: new google.maps.LatLng(51.476706,0),
          radius: miles * 1609.344,
          fillColor: "#ff69b4",
          fillOpacity: 0.5,
          strokeOpacity: 0.0,
          strokeWeight: 0,
          map: map
      });
      map = new google.maps.Map(document.getElementById('map_canvas'),  mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);

Mais la carte n'est pas inicialized.

OriginalL'auteur user984621 | 2013-09-12

  1. 3

    Eh bien, c'est très facile d'ajouter un cercle un carte avec les Maps API, voir
    https://developers.google.com/maps/documentation/javascript/reference?csw=1#Circle

    Et puis vous avez juste besoin de JS pour convertir des miles de mètres. Multiplier par 1609.344 en fait devrait le faire. Donc quelque chose comme ceci peut-être:

    <!DOCTYPE html>
<html>
<head>
<title>Circle</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 480px; width:600px; }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>

<script>
    function initialize() {
        var miles = 3;

        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 11,
            center: new google.maps.LatLng(51.476706, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var circle = new google.maps.Circle({
            center: new google.maps.LatLng(51.476706, 0),
            radius: miles * 1609.344,
            fillColor: "#ff69b4",
            fillOpacity: 0.5,
            strokeOpacity: 0.0,
            strokeWeight: 0,
            map: map
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

    (mis à jour ma réponse pour une solution de travail)

    Grâce duncan pour votre message. Je l'ai juste essayé, mais toujours obtenir une carte vierge. Me manque t-il quelque chose? (Je l'ai mis à l'OP).
    vous avez confondu votre MapOptions et votre CircleOptions!
    Mais comment l'intégrer?
    Ok - une chose encore - pourquoi le cercle n'est pas bien arrondis comme sur la capture d'écran ci-dessus? Je n'ai pas pu faire le cercle arrondi (il y a toujours des bords).
    Je n'ai pas ce problème, mes cercles sont bien arrondis. Pouvez-vous poster une capture d'écran et de tout le code?

    OriginalL'auteur duncan