How To Make A Circle Around A Particular City On A Map?

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 it

Solution 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();
});

functionmyMap() {
  //add global geocoderwindow.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');
}

functiondrawCircleAroundCity(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;
    }
  });
}

functionaddCircle(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);
}

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

Solution 2:

Use the Google Maps Geocoding API and construct the appropriate request from your JSON fields. The API will return a JSON object containing the the latitude and longitude values.

Your API request will be in the form of:

https://maps.googleapis.com/maps/api/geocode/json?address=1750+riverside+drive,ottawa,ontario,canada&key=YOUR_API_KEY

Solution 3:

Translating a city to LatLon can't be too hard but here's some code I could copy blindly without thinking too much. HTH.

var circleOptions = {
      clickable: true,
      draggable: true,
      editable: true,
      visible: false,
      strokeColor: 'gray',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: 'gray',
      fillOpacity: 0.35,
      center: marker.getPosition()
    };

    radarCircle = newradarView(new google.maps.Circle(circleOptions));

    google.maps.event.addDomListener(radarCircle,    'center_changed', reScope);
    google.maps.event.addDomListener(radarCircle,    'radius_changed', reScope);

functionradarView(superBase)
{
    this.__proto__ = superBase;

    if (thisinstanceof google.maps.Circle) {
        augmentCircle.apply(this);
    } elseif (thisinstanceof google.maps.Rectangle) {
        augmentRectangle.apply(this);
    } else {
        Tier3Toolbox.reportError({header:"Internal error", 
                message:"Inheriting from unknown object"});
    }

    this.doX = function(x){return"x is>" + x;};

    returnthis;
}

functionaugmentCircle()
{
    this.moveBorder = function()
    {
        google.maps.event.trigger(radarCircle,"center_changed");
    }
}

functionaugmentRectangle()
{
    this.moveBorder = function()
    {
        google.maps.event.trigger(radarRectangle,"bounds_changed");
    }
}


functionreScope() {

    var searchReq = {'cmd':'search', 'scopeVintage':scopeVintage};
    if (radarShape.getCenter) {
        searchReq.checker = 0;
        var currCenter = radarCircle.getCenter();
        searchReq.centerLat = currCenter.lat();
        searchReq.centerLng = currCenter.lng();         
        searchReq.radius = radarCircle.getRadius();
    } else {
        searchReq.checker = 1;
        searchReq.SWLat = radarShape.getBounds().getSouthWest().lat();
        searchReq.SWLng = radarShape.getBounds().getSouthWest().lng();
        searchReq.NELat = radarShape.getBounds().getNorthEast().lat();
        searchReq.NELng = radarShape.getBounds().getNorthEast().lng();
    }

    facFinder.postMessage(searchReq);
}