How to make a circle around a particular city on a map?

Question

I am working on a project in which I want to make a circle around the location of an item on a google map. In my below code if I click show tab then it should show circle around item's location on a google map:

<div class="tab-pane" id="show">
 <p>
    <span class="heading_size">show:</span>
 </p>

 <p class="text-justify mb-0 pb-5">
   <!-- <? php echo strtolower($data['item']->item_address); ?> -->
    <div id="map" style="width:100%;height:500px"></div> 

    <script>
    function myMap() {
      var amsterdam = new google.maps.LatLng(52.395715,4.888916);
      var mapCanvas = document.getElementById("map");
      var mapOptions = {center: amsterdam, zoom: 7};
      var map = new google.maps.Map(mapCanvas,mapOptions); 

      var myCity = new google.maps.Circle({
        center: amsterdam,
        radius: 50000,
        strokeColor: "#0000FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: 0.4
      });

      myCity.setMap(map);
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
 </p>
</div>

Problem Statement:

Below is the item details that gets printed out when I print item_address as shown in the above code (commented at this moment) using echo. So I need to use below data to make a circle around city field in the below json. For example: in the below json - city field is ottawa so it should make circle around ottawa city. As of now I can make circle around a particular lat/long but instead if I have a city name, then how can I make a circle around that city? Is this possible to do?

{
    "address_id": 115,
    "country": "canada",
    "state": "ontario",
    "city": "ottawa",
    "street": "riverside drive",
    "number": "1750",
    "postal": "k1g 3t6"
}

Answer 1

You need to use Gecoding to find out position of city on the map. You can take a look at working example below.

I have created following function which allows you to draw circle around any city that you pass to the function:

google.maps.event.addDomListener(window, "load", function() {
  myMap();
});

function myMap() {
  //add global geocoder
  window.geocoder = new google.maps.Geocoder();

  var mapCanvas = document.getElementById("map_div");
  var mapOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(33.808678, -117.918921)
  };
  window.map = new google.maps.Map(mapCanvas, mapOptions);

  drawCircleAroundCity('ottawa');
}

function drawCircleAroundCity(cityName) {
  if (!cityName) return;
  if (!window.geocoder) throw "Geocoder is not loaded";

  window.geocoder.geocode({
    'address': cityName
  }, function(results, status) {
    if (status == 'OK') {
      addCircle(results[0].geometry.location, true);
    } else {
      throw 'Unable to find address: ' + address;
    }
  });
}

function addCircle(position, recenter) {
  if (typeof(position) != 'object') return;
  if (!window.map) throw "Map is not loaded";

  var myCity = new google.maps.Circle({
    center: position,
    radius: 50000,
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#0000FF",
    fillOpacity: 0.4
  });

  myCity.setMap(window.map);

  if (recenter)
    window.map.setCenter(position);
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>