Google Karte lädt nicht richtig in der Website, aber nach dem Klicken auf Zoom funktioniert es

Question

Ich versuche Google Map JavaScript API aber hier zu verwenden.

Ich konnte das Problem mit diesem Code nicht finden.

Wenn ich diese Code-Map ausführen wird nicht ordnungsgemäß geladen, aber wenn ich auf Zoom klicken, wird es ordnungsgemäß geöffnet.

Kann mir jemand mit diesem Code helfen?

Dies ist das Bild, wenn Karte Laden:

<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>

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 einfügen lat und lang mit Ihrer Position Karte gezielte

das Bild öffnen und vergrößern