CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Dan
Dan

Reputation: 1660

Google Maps Javascript API - Hide circle on load and zoom out and show on click

I'm trying to get the Google maps API to play nice. I want to show a zoomed in view of a location, when a checkbox is checked, I want to zoom out and show a circle which will show the service area.

I've managed to get the circle showing on click but I can't work out how to control the zoom.

Here's my code so far

JS

// global variables
var map;
var ntucCircle;
var markers = [];

$("#layer1_checkbox").change(function () {
  ntucCircle.setMap(ntucCircle.getMap() ? null : map);
});

$("#layer1_checkbox").change(function () {
  if (this.checked) {
    ntucCircle.setMap(map);
  } else {
    ntucCircle.setMap(null);
  }
});

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: {
      lat: 1.3420894594991328,
      lng: 103.83490918886719,
    },
  });

  var ntuc = {
    lat: 1.32805676,
    lng: 103.9216584,
  };

  // initialize the global variable
  ntucCircle = new google.maps.Circle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,

    center: ntuc,
    radius: 5000, // in metres
    visible: null,
  });
}
google.maps.event.addDomListener(window, "load", initMap);

HTML

Layer 1 <input id="layer1_checkbox" type="checkbox" unchecked />

Upvotes: 1

Views: 436

Answers (1)

geocodezip
geocodezip

Reputation: 161334

If you want your map to zoom to fit the circle when it is displayed, you can use Map.fitBounds and Circle.getBounds.
To add that to your code, call them when you display the circle:

$("#layer1_checkbox").change(function () {
  if (this.checked) {
    ntucCircle.setMap(map);
    map.fitBounds(ntucCircle.getBounds());
  } else {
    ntucCircle.setMap(null);
  }
});

proof of concept fiddle enter image description here

code snippet:

// global variables
var map;
var ntucCircle;
var markers = [];

$("#layer1_checkbox").change(function () {
  ntucCircle.setMap(ntucCircle.getMap() ? null : map);
});

$("#layer1_checkbox").change(function () {
  if (this.checked) {
    ntucCircle.setMap(map);
    map.fitBounds(ntucCircle.getBounds());
  } else {
    ntucCircle.setMap(null);
  }
});

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: {
      lat: 1.3420894594991328,
      lng: 103.83490918886719,
    },
  });

  var ntuc = {
    lat: 1.32805676,
    lng: 103.9216584,
  };

  // initialize the global variable
  ntucCircle = new google.maps.Circle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,

    center: ntuc,
    radius: 5000, // in metres
    visible: null,
  });
}
google.maps.event.addDomListener(window, "load", initMap);
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 90%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
  Layer 1 <input id="layer1_checkbox" type="checkbox" unchecked />
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly&channel=2"
      async
    ></script>
  </body>
</html>

Upvotes: 2

Related Questions