CODEWITHSUNDEEP
javascriptgoogle-maps
user1
user1

Reputation: 357

Google Maps v3 - Setting Circle to setPosition(place)

Trying create a circle with a static radius around the location searched using the places library. Similar to this working example. Only difference is I just need the circle radius to be static.

Heres what I've tried(I'm new to gmaps):

var mapOptions = {
    center: new google.maps.LatLng(37.7831,-122.4039),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var acOptions = {
      types: ['establishment']
    };
    var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'),acOptions);
    autocomplete.bindTo('bounds',map);
    var infoWindow = new google.maps.InfoWindow();

    var CircleOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
    };
    var cityCircle = new google.maps.Circle(CircleOptions);

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      infoWindow.close();
      citycircle.close();
      var place = autocomplete.getPlace();
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);
      }
      infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
      infoWindow.setPosition(place.geometry.location);
      infoWindow.open(map);
      cityCircle.setPosition(infoWindow);
    });

Upvotes: 0

Views: 2441

Answers (1)

geocodezip
geocodezip

Reputation: 161324

The code below is incorrect. The .setPosition method requires a google.maps.LatLng object, not an infoWindow. You should get a javascript error or a message from the API.

cityCircle.setPosition(infoWindow);

This should work (circle doesn't have a position, it has a center):

cityCircle.setCenter(place.geometry.location);

You also need to define the radius of the circle.

code to put a circle at the location returned by the autocomplete service:

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      infoWindow.close();
      var place = autocomplete.getPlace();
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);
      }
      infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
      infoWindow.setPosition(place.geometry.location);
      infoWindow.open(map);
      cityCircle.setMap(map);
      cityCircle.setCenter(place.geometry.location);
      map.fitBounds(cityCircle.getBounds());
    });

working example

screenshot of example page with circle

code snippet:

var map = null;
var CircleOptions = {
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  radius: 1500
};
var cityCircle = new google.maps.Circle(CircleOptions);

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(37.7831, -122.4039),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var acOptions = {
    types: ['establishment']
  };
  var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), acOptions);
  autocomplete.bindTo('bounds', map);
  var infoWindow = new google.maps.InfoWindow();


  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infoWindow.close();
    var place = autocomplete.getPlace();
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }
    infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
    infoWindow.setPosition(place.geometry.location);
    infoWindow.open(map);
    cityCircle.setMap(map);
    cityCircle.setCenter(place.geometry.location);
    map.fitBounds(cityCircle.getBounds());
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  width: 100%;
  height: 500px;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="text" id="autocomplete"></input>
<div id="map-canvas"></div>

Upvotes: 4

Related Questions