谷歌地图在网站上没有正确加载，但在点击缩放后它可以正常运行

Question

我正在尝试使用谷歌地图JavaScript API，但在这里。

我找不到此代码的问题。

当我运行此代码映射时未正确加载，但当我点击缩放时，它正确打开。

任何人都可以帮我这个代码吗？

这是地图加载时的图像：

＆＃13;

＆＃13;

<input id="pac-input" class="controls" type="text" placeholder="Search">
<div id="map" style="height: 400px;"></div>
<script>
  function initAutocomplete() {
    var latlng = new google.maps.LatLng(23.0622528, 72.5690456);
    var map = new google.maps.Map(document.getElementById('map'), {
      center: latlng,
      zoom: 7,
      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 = [];
    // 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;
      }
      // 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);
    });

    // select Latitude and longtitude
    google.maps.event.addListener(map, "click", function (e) {
      //lat and lng is available in e object
      if (confirm("Do you want to select this location?")) {
        var lat = e.latLng.lat();
        var lng = e.latLng.lng();
        $("#lat").val(lat);
        $("#lng").val(lng);
      } else {}
    });
  }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places&callback=initAutocomplete"
  async defer>
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

<script type='text/javascript' src='http://maps.google.com/maps/api/js?key=your key></script>
<script>
var map;
var marker;
var geocoder;
var infowindow;
function GoogleMapInit(id, latitude, longitude, address) 
{    
var latlng = new google.maps.LatLng(latitude, longitude);
var latlngMarker = new google.maps.LatLng(latitude, longitude);
var mapOptions = 
{        
  center: latlng,        
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,        
  scrollwheel: true,
  streetViewControl: false,        
  zoom: 14,
  zoomControl: true,        
  zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }
}
element = document.getElementById(id);
map = new google.maps.Map(element, mapOptions);   
marker = new google.maps.Marker({ draggable:true, map: map, position:  latlngMarker});   
infowindow = new google.maps.InfoWindow({content:'<strong>Jakarta</strong><br>%description%<br>'});
google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});
infowindow.open(map, marker);
geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status) 
{
  if (status == google.maps.GeocoderStatus.OK) 
  {
     map.setCenter(results[0].geometry.location);
     var marker = new google.maps.Marker(
     {
        map: map, 
        position: results[0].geometry.location
     });
  } 
  else 
  {
    //    alert("Geocode was not successful: " + status);
  }
});
}
GoogleMapInit('GoogleMaps', lat, lang, 'New+York,NY');
</script>

lat lang example 使用您的位置定位地图粘贴lat和lang

打开图像然后缩放