Draw circle with google map api

Question

I have this simple code:

<!DOCTYPE html>
<html>
  <head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <title>Google Map API on xhtml</title>
   <style>
    html, body {
     height: 100%;
     margin: 0;
     padding: 0;
    }
    #map {
     height: 100%;
    }
   </style>
   <head>
   <body>
    <script>
    //Initialise la map
    function initMap() {                   
      var map = new google.maps.Map(document.getElementById('map'), {
        scrollwheel: true,
        mapTypeControl: false,
        center: {lat: 48.8534100, lng: 2.3488000},
        zoom: 13,
        streetViewControl: false,
        zoomControl:true
      });
    }
    function drawOnclick() {
      alert("clicked");
        var antennasCircle = new google.maps.Circle({
          strokeColor: "#FF0000",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#FF0000",
          fillOpacity: 0.35,
          map: map,
          center: {lat: 48.8534100, lng: 2.34},
          radius:  1000* 100
        });
      }
      </script>
      <input id="clickMe" type="button" value="clickme" onclick="drawOnclick();" />
      <div id="map">
      </div>
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbns5KFelTGVj8E8FHdlJfdM9lEHHo4OA&amp;libraries=visualization&amp;callback=initMap" async="async" defer="defer"></script>
  </body>
</html>

My goal is to draw a red circle over Paris when I click on the button. The problem is that when I click the button, nothing happens.

What I don't understand is that when I set my initMap as follows:

//Initialise la map
function initMap() {                   
  var map = new google.maps.Map(document.getElementById('map'), {
    scrollwheel: true,
    mapTypeControl: false,
    center: {lat: 48.8534100, lng: 2.3488000},
    zoom: 13,
    streetViewControl: false,
    zoomControl:true
  });
  var antennasCircle = new google.maps.Circle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map: map,
    center: {lat: 48.8534100, lng: 2.34},
    radius:  100
  });
}

The circle is drawn. Can someone explain?

Answer 1

The map variable is local to the initialize function. To use it in a HTML click function (for the button), it needs to be in the global scope (where the HTML click function runs). To fix it, remove the var that declares it outside of the initialize function:

// map variable in global scope
var map;
//Initialise la map
function initMap() {
  // initialize the map variable
  map = new google.maps.Map(document.getElementById('map'), {
  // ...

working code snippet:

 html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; }

 <script> // map variable in global scope var map; //Initialise la map function initMap() { // initialize the map variable map = new google.maps.Map(document.getElementById('map'), { scrollwheel: true, mapTypeControl: false, center: { lat: 48.8534100, lng: 2.3488000 }, zoom: 13, streetViewControl: false, zoomControl: true }); } function drawOnclick() { // alert("clicked"); var antennasCircle = new google.maps.Circle({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map: map, center: { lat: 48.8534100, lng: 2.34 }, radius: 1000 * 100 }); map.fitBounds(antennasCircle.getBounds()); } </script> <input id="clickMe" type="button" value="clickme" onclick="drawOnclick();" /> <div id="map"> </div> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&amp;libraries=visualization&amp;callback=initMap" async="async" defer="defer"></script>

Draw circle with google map api

Question

1 answers

solution1
6 ACCPTED 2017-01-24 14:18:21

Draw circle with google map api

Question

1 answers

solution1 6 ACCPTED 2017-01-24 14:18:21

solution1
6 ACCPTED 2017-01-24 14:18:21