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

Question

I'm trying to show Google maps with complex polyline and markers through value passed from db. Everything work fine, but the maps come out grey and is not centered I tried different solutions but all gave me same problem. Below my Js code and the html call. Any idea why i got this?

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

Is this what you want?