Google Maps API v3 - Place Google Maps Circle as Lat/Lng from Search Box

Question

Fairly new to this as my code shows. The code I have has been mainly taken from the Google Developers page for using the Google Maps API v3.

What I am trying to do is load a set amount of locations from a MySql database into Google Maps using PHP. I would then like to be able to use the result lat/lng of a search box to place an editable circle on the map so that the user can change the radius and move the circle and see which locations are covered by the circle. If the user does a new search I intend for the circle to be removed and replaced again at the new lat/lng from the search box.

So far I have managed:

To load locations from MySql into Google Maps using PHP
Insert a search box which pans to the address found
Enter an editable circle at a set lat/lng. This is where I have come unstuck, as I would like the editable circle to be placed dynamically.

Any help would be much appreciated. Thank you.

21.01.2018 19:35 GMT: New example of code below taken from Google Maps Developer page, as the old version of code posted had a Php link to a MySQL database and could not be loaded by anyone else. This is the search box example code from the Google Developers page (https://developers.google.com/maps/documentation/javascript/examples/places-searchbox) and I have added some very basic code to add an editable circle.

The idea again is that, when the user searches a location instead of a marker being placed on the map an editable circle is placed. Each time a new location is searched for the editable circle is cleared from the map. I would have an input box where the user enters the radius of the circle in metres. When the radius is entered into the box the radius of the circle changes to match it.

New code:

 

  
    
    
    Places Searchbox

geocodezip · Accepted Answer

To move the circle to the first result from the SearchBox, set the center of the circle to the position of the results. Add this to the place_changed event processing:

if (index == 0) {
  circle.setCenter(place.geometry.location);
}

proof of concept fiddle

code snippet:

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -33.8688,
      lng: 151.2195
    },
    zoom: 13,
    mapTypeId: 'roadmap'
  });

  // Create the search box and link it to the UI element.
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });

  var markers = [];

  var circle = new google.maps.Circle({
    map: map,
    center: new google.maps.LatLng(-33.856717, 151.215288),
    radius: 1000,
    strokeColor: "#00ff00",
    fillcolor: "red",
    editable: true
  });

  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    // Clear out the old markers.
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place, index) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
      }
      var icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      markers.push(new google.maps.Marker({
        map: map,
        icon: icon,
        title: place.name,
        position: place.geometry.location
      }));
      
      // center the circle on the first result
      if (index == 0) {
        circle.setCenter(place.geometry.location);
      }
      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    map.fitBounds(bounds);
  });
}
google.maps.event.addDomListener(window, "load", initAutocomplete);

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#description {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
}

#infowindow-content .title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  font-family: Roboto;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

.pac-controls {
  display: inline-block;
  padding: 5px 11px;
}

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

#title {
  color: #fff;
  background-color: #4d90fe;
  font-size: 25px;
  font-weight: 500;
  padding: 6px 12px;
}

#target {
  width: 345px;
}

Google Maps API v3 - Place Google Maps Circle as Lat/Lng from Search Box

Answers (1)

Related Questions