javascript - Draw circle with google map api

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=";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?

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./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?

Share Improve this question edited Jan 24, 2017 at 14:34 geocodezip 161k14 gold badges226 silver badges255 bronze badges asked Jan 24, 2017 at 14:05 Omegaspard 1,9804 gold badges28 silver badges55 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 11

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./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&amp;libraries=visualization&amp;callback=initMap" async="async" defer="defer"></script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Draw circle with google map api - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)