显示地图不清晰和居中，使用多条折线和标记

Question

我试图通过从db传递的值显示具有复杂折线和标记的Google地图。 一切工作正常，但地图出来灰色，不居中 我尝试了不同的解决方案，但都给了我同样的问题。 在我的Js代码和html调用下面。 任何想法，为什么我得到这个？

<script type="text/javascript"> 
    function initialize() { 
     var latlng = new google.maps.LatLng(-26.2041028, 28.047305100000017); 
     var mapOpt = { 
      navigationControl: true, 
      mapTypeControl: false, 
      scaleControl: false, 
      scrollwheel: false, 
      zoom: 3, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }; 
     var map = new google.maps.Map(document.getElementById('map-210'), mapOpt); 
     var infowindow = new google.maps.InfoWindow(); 
     var marker, i; 
     var tripPlanCoordinates = []; 
     var locations = [ 
      ["Johannesburg", -26.2041028, 28.047305100000017, 1], 
      ["Mpumalanga", -25.565336, 30.52790959999993, 2], 
      ["Kruger Park", -24.7562879, 31.81070790000001, 3], 
      ["Città del Capo", -33.9248685, 18.424055299999964, 4], 
      ["Mahé", -4.6826693, 55.48039599999993, 5], 
     ]; 
     for (i = 0; i < locations.length; i++) { 
      tripPlanCoordinates[i] = new google.maps.LatLng(locations[i][1], locations[i][2]); 
      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
       map: map, 
       icon: 'http://localhost/images/markers/1-default.png', 
       title: "'" + locations[i][0] + "'" 
      }); 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(locations[i][0]); 
        infowindow.open(map, marker); 
        console.log("#stage_" + i); 
        window.location.href = "#stage_" + i; 
       } 
      })(marker, i)); 
     } 
     var tripPlan = new google.maps.Polyline({ 
      path: tripPlanCoordinates, 
      geodesic: true, 
      strokeColor: '#B12138', 
      strokeOpacity: 0.5, 
      strokeWeight: 2 
     }); 
     tripPlan.setMap(map); 
    } 

    function loadMapScript() { 
     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.src = 'https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initialize'; 
     document.body.appendChild(script); 
    } 

    $(document).ready(function() { 
     loadMapScript(); 
    }); 
    </script> 
    <div id="map-210" style="width:100%; height:380px;"></div> 

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
    function initialize() { 
 
     var latlng = new google.maps.LatLng(-26.2041028, 28.047305100000017); 
 
     var mapOpt = { 
 
      navigationControl: true, 
 
      mapTypeControl: false, 
 
      scaleControl: false, 
 
      scrollwheel: false, 
 
      zoom: 3, 
 
      center: latlng, 
 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
 
     }; 
 
     var map = new google.maps.Map(document.getElementById('map-210'), mapOpt); 
 

 
     var infowindow = new google.maps.InfoWindow(); 
 
     var marker, i; 
 
     var tripPlanCoordinates = []; 
 
     var locations = [ 
 
      ["Johannesburg", -26.2041028, 28.047305100000017, 1], 
 
      ["Mpumalanga", -25.565336, 30.52790959999993, 2], 
 
      ["Kruger Park", -24.7562879, 31.81070790000001, 3], 
 
      ["Città del Capo", -33.9248685, 18.424055299999964, 4], 
 
      ["Mahé", -4.6826693, 55.48039599999993, 5], 
 
     ]; 
 
     for (i = 0; i < locations.length; i++) { 
 
      tripPlanCoordinates[i] = new google.maps.LatLng(locations[i][1], locations[i][2]); 
 
      marker = new google.maps.Marker({ 
 
       position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
       map: map, 
 
       icon: 'http://localhost/images/markers/1-default.png', 
 
       title: "'" + locations[i][0] + "'" 
 
      }); 
 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
       return function() { 
 
        infowindow.setContent(locations[i][0]); 
 
        infowindow.open(map, marker); 
 
        console.log("#stage_" + i); 
 
        window.location.href = "#stage_" + i; 
 
       } 
 
      })(marker, i)); 
 
     } 
 
     var tripPlan = new google.maps.Polyline({ 
 
      path: tripPlanCoordinates, 
 
      geodesic: true, 
 
      strokeColor: '#B12138', 
 
      strokeOpacity: 0.5, 
 
      strokeWeight: 2 
 
     }); 
 
     tripPlan.setMap(map); 
 
    } 
 

 
    function loadMapScript() { 
 
     var script = document.createElement('script'); 
 
     script.type = 'text/javascript'; 
 
     script.src = 'https://maps.googleapis.com/maps/api/js?callback=initialize'; 
 
     document.body.appendChild(script); 
 
    } 
 

 
    $(document).ready(function() { 
 
     loadMapScript(); 
 
    }); 
 
    </script> 
 
    <div id="map-210" style="width:100%; height:380px;"></div>

这是你想要的吗？