Google지도가 웹 사이트에 제대로로드되지 않고 확대/축소를 클릭하면 작동합니다.

Question

Google지도 JavaScript API를 사용하려고하는데 여기 있습니다.

이 코드에서 문제를 찾을 수 없습니다.

이 코드 맵을 실행하면 제대로로드되지 않지만 확대/축소를 클릭하면 올바르게 열립니다.

누구든지이 코드를 도와 줄 수 있습니까?

<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 이 당신의 위치에 위도와 랭 붙여지도 ​​

에게 대상 :

이지도 로딩 이미지입니다

이미지를 연 다음 확대하십시오