Google地方搜索标记未显示在地图上

Question

I'm coding a demo of how I want a future search function to work. I want to query google on an address or area and return the area bounds as well as nearby places. To do this, I am using places autocomplete, geocode, and places search.

So far I am successfully getting predicted search queries resulting in the bounds being drawn as a rectangle on my map. However, when I try to implement markers for the place search result no markers are appearing on my map. I know the search is working because putting an alert in the createMarker function on each location returns several lat/lng's that coincide with my area.

I suspect that maybe the map object is not being passed to my createMarker function, but I am kind of a noob when it comes to Javascript. I tried passing an additional parameter but it didn't do much.

It should be noted that I am able to create a marker within the initialize function, when I attempt to just create one static marker.

EDIT: I have removed the type parameter for the place search request, but the code doesn't work even with the parameter ['store'].

var map;
var infowindow;


function initialize() {

var view_lat = document.getElementById('view_lat').value;
var view_lng = document.getElementById('view_lng').value;
var focus = new google.maps.LatLng(view_lat,view_lng);
var swlat = document.getElementById('swlat').value;
var swlng = document.getElementById('swlng').value;
var nelat = document.getElementById('nelat').value;
var nelng = document.getElementById('nelng').value;
var map_canvas = document.getElementById('map-canvas_embed');
var map_options = {
    center: new google.maps.LatLng(parseFloat(view_lat), view_lng),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mysw = new google.maps.LatLng(swlat,swlng)

var map = new google.maps.Map(map_canvas, map_options)
var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: new google.maps.LatLngBounds(
        new google.maps.LatLng(swlat, swlng),
        new google.maps.LatLng(nelat, nelng))
});
var request = {
    location: focus,
    radius: 500

};

var place_search = new google.maps.places.PlacesService(map);
place_search.nearbySearch(request,callback)



}

Handles the result from google places search

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {

      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
var placeLoc = place.geometry.location;

var marker = new google.maps.Marker({

    position: place.geometry.location
});
marker.setMap(map);
}

Autocomplete variables

var input = document.getElementById('location');
var options = {
    componentRestrictions: {country: 'se'},
    types: ['geocode']
}
var searchform = document.getElementById('searchform');
var place;
var autocomplete = new google.maps.places.Autocomplete(input, options);

Add listener to detect autocomplete selection

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    place = autocomplete.getPlace();
    //console.log(place);
});

Add listener to search (This function isn't working, hence my work around in the initialize function)

searchform.addEventListener("submit", function() {
    var newlatlong = new       google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
    map.setCenter(newlatlong);
    marker.setPosition(newlatlong);
    map.setZoom(12);
    google.maps.event.trigger(map, 'resize');

});

Reset the inpout box on click

input.addEventListener('click', function(){
    input.value = "";
});

Call the initialize function

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

Indeed it looks like a problem of JavaScript's scope.

Consider these lines of your code:

    function initialize() {
      //...
      var map = new google.maps.Map(map_canvas, map_options)
      //...
     }

Declaring map inside the initialize function makes your map variable unreachable out of your initialize function.

So when you try to reach it in your searchform , map.setCenter() will show in your console that map is undefined.

You could solve your issue in several ways.

1. declare map at the beginning of your script (before initialize is executed, anyways)
2. declare the searchform.addEventListener("submit", function(){}) inside your initialize() function and use it before initialize() ends its execution.