单击按钮时在谷歌地图中显示自动完成器地址的问题？

Question

I have added the google map code on the page. you can check it on page https://artificialgrass.lazylawn.ca/estimate/ It is not showing the search location in a zoom (20) that I have set it in code. If again I search the address then it displays. Can I load the map on button click? I'm using the following google map code.

var map, measureTool;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 43.6916507,
      lng: -79.41045
    },
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    zoom: 20,
    scaleControl: true
  });
  // 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);
  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });

  var markers = [];
  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();
    if (places.length == 0) {
      return;
    }

    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details,
    // and then fill-in the corresponding field on the form.
    for (var i = 0; i < places[0]['address_components'].length; i++) {
      var addressType = places[0]['address_components'][i].types[0];
      if (componentForm[addressType]) {
        var val = places[0]['address_components'][i]
          [componentForm[addressType]];
        document.getElementById(addressType).value = val;
      }
    }

    // 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) {
      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
      }));

      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    map.fitBounds(bounds);
  });

  measureTool = new MeasureTool(map, {
    contextMenu: true,
    showSegmentLength: true,
    tooltip: true,
    unit: MeasureTool.UnitTypeId.IMPERIAL,
    // metric, imperial, or nautical
  });

  // test for setting units
  //    measureTool.setOption('unit', MeasureTool.UnitTypeId.METRIC);

  measureTool.addListener('measure_start', () => {
    console.log('started');
    //      measureTool.removeListener('measure_start')
  });
  measureTool.addListener('measure_end', (e) => {
    console.log('ended', e.result);
    //      measureTool.removeListener('measure_end');
    var area2 = e.result['area'].toFixed(2);
    document.getElementById("selected_area").value = area2;
    document.getElementById("area_size").value = area2;
  });
  measureTool.addListener('measure_change', (e) => {
    console.log('changed', e.result);
  });
}
document.getElementById("get-start").onclick = function() {
  document.getElementById("maparea").style.display = 'block';
}

Answer 1

Got the solution.

                 <script>
                 var map, measureTool;
                  var componentForm = {
                  street_number: 'short_name',
                  route: 'long_name',
                  locality: 'long_name',
                  administrative_area_level_1: 'short_name',
                  country: 'long_name',
                  postal_code: 'short_name'
                  };
                  function initMap() {
                   map = new google.maps.Map(document.getElementById('map'), {
                   center: {lat: 43.6916507, lng: -79.41045 },
                   mapTypeId:google.maps.MapTypeId.SATELLITE,
                    zoom: 20,
                    scaleControl: true
                    });
                        // 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);
                        var searchBtn = document.getElementById('get-start');
                        // Bias the SearchBox results towards current map's viewport.
                        map.addListener('bounds_changed', function() {
                          searchBox.setBounds(map.getBounds());
                        });

                        var markers = [];
                        // Listen for the event fired when the user selects a prediction and retrieve
                        // more details for that place.
                    searchBox.addListener('places_changed', function() {

                    }); 
                    searchBtn.onclick = function () {
                        document.getElementById("maparea").style.display = 'block';
                        displaySearchResults(map,searchBox,markers);
                    }

                    measureTool = new MeasureTool(map, {
                      contextMenu: true,
                      showSegmentLength: true,
                      tooltip: true,
                      unit: MeasureTool.UnitTypeId.METRIC,
                      // metric, imperial, or nautical
                    });

                    // test for setting units
                //    measureTool.setOption('unit', MeasureTool.UnitTypeId.METRIC);

                    measureTool.addListener('measure_start', () => {
                      console.log('started');
                //      measureTool.removeListener('measure_start')
                    });
                    measureTool.addListener('measure_end', (e) => {
                      console.log('ended', e.result);
                //      measureTool.removeListener('measure_end');
                      var area2 = e.result['area'].toFixed(2);
                      document.getElementById("selected_area").value= area2;
                    });
                    measureTool.addListener('measure_change', (e) => {
                      console.log('changed', e.result);
                    });
                  }

                function displaySearchResults(map, searchBox, markers) {
                    var places = searchBox.getPlaces();
                    if (places.length == 0) {
                        return;
                    }
                                for (var component in componentForm) {
                                document.getElementById(component).value = '';
                                document.getElementById(component).disabled = false;
                              }

                              // Get each component of the address from the place details,
                              // and then fill-in the corresponding field on the form.
                              for (var i = 0; i < places[0]['address_components'].length; i++) {
                                var addressType = places[0]['address_components'][i].types[0];
                                if (componentForm[addressType]) {
                                  var val = places[0]['address_components'][i][componentForm[addressType]];
                                  document.getElementById(addressType).value = val;
                                }
                              }
                    // 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) {
                        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
                        }));

                        if (place.geometry.viewport) {
                            // Only geocodes have viewport.
                            bounds.union(place.geometry.viewport);
                        } else {
                            bounds.extend(place.geometry.location);
                        }
                    });
                    map.fitBounds(bounds);
                }
                </script>