发表新帖
发表新帖

Google Maps API showing blank map

前端 未结
关注
7 541
再見小時候
再見小時候 2021-01-17 14:41

I\'m sure this is a basic problem but I\'ve hit my head against the wall too many times now, so hopefully someone will take pity on me!

I have the following example

相关标签:
7条回答
  • 一向
    2021-01-17 15:04

    This can also occur if the height/width of the map is 0.

    0 讨论(0)
  • 一整个雨季
    2021-01-17 15:17

    Try resizing the browser window, give a shake to browser/drag it from browser tab with the cursor and you will see the map appearing.

    From some strange reason in MVC partial view google map comes as blank, your map is working it just need to be resized.

    Shaking a browser window with cursor sounds funny, but it works and I am not sure how to best describe it.

    Thanks, Anurag

    =======================================================================

    my final working code is below:

    `

    <script type="text/javascript">

    $(document).ready(function () {
        (function () {
            var options = {
                zoom: 6,
                center: new google.maps.LatLng(-2.633333, 37.233334),
                mapTypeId: google.maps.MapTypeId.TERRAIN,
                mapTypeControl: false
            };

            // init map
            var map = new google.maps.Map(document.getElementById('map_canvas'), options);


            var arrLocation = [];
            $("#markerDiv").find("div").each(function () {
                var Lat = $(this).find("input[id='Latitude']").val();
                var Lon = $(this).find("input[id='Longitude']").val();
                var Id = $(this).find("input[id='Id']").val();
                var AssessmentDet = $(this).find("input[id='AssessmentDateTime']").val();
                var LocAcc = $(this).find("input[id='LocationAccuracy']").val();
                var assessorName = $(this).find("input[id='AssessorName']").val();
                var partnerName = $(this).find("input[id='PartnerName']").val();
                arrLocation.push({
                    Id: Id,
                    Latitude: Lat,
                    Longitude: Lon,
                    AssessmentDate: AssessmentDet,
                    LocationAccuracy: LocAcc,
                    AssessorDetail: assessorName,
                    PartnerName: partnerName
                    });
            });

            var allMarkers = [];

            for (var i = 0; i < arrLocation.length; i++) {

                //final position for marker, could be updated if another marker already exists in same position
                var latlng = new google.maps.LatLng(arrLocation[i].Latitude, arrLocation[i].Longitude);
                var finalLatLng = latlng;
                var comparelatlng = "(" + arrLocation[i].Latitude + "," + arrLocation[i].Longitude + ")";
                var copyMarker = arrLocation[i];

                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(arrLocation[i].Latitude, arrLocation[i].Longitude),
                    map: map,
                    title: 'Equine # ' + arrLocation[i].Id,
                    icon:"abc.png"
                });


                var markerInfo = "Reference # : <b>" + arrLocation[i].Id + "</b><br/>";
                markerInfo = markerInfo + "Assessor : <b>" + arrLocation[i].AssessorDetail + "</b><br/>";
                markerInfo = markerInfo + "Date :  <b>" + arrLocation[i].AssessmentDate + "</b><br/>";
                markerInfo = markerInfo + "Partner :  <b>" + arrLocation[i].PartnerName + "</b>";(function (marker, i) {

  bindInfoWindow(marker, map, new google.maps.InfoWindow(), markerInfo);
                })(marker, i);
            }
        })();
    });

    function bindInfoWindow(marker, map, infowindow, html) {
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(html);
            infowindow.open(map, marker);
        });
    }


</script>

    `

    0 讨论(0)
  • 刺人心
    2021-01-17 15:17

    I can see a general javascript issue with your code.

    Your script might trying to embed the map in the page before the HTML is loaded.

    Call the function like this (there are other ways).

    <body onload="initialize()">
    0 讨论(0)
  • 梦谈多话
    2021-01-17 15:22

    It is because of the worng "google.maps.LatLng" provided. provide for a test the coords and it will work. replace the line

    center: new google.maps.LatLng(results[0].geometry.location),

    with 

    center: new google.maps.LatLng(-34.397, 150.644)

    get England coords

    0 讨论(0)
  • 遥遥无期
    2021-01-17 15:25

    I tried to set map's MapTypeId and it helped as Anurag proposed:

    map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
    0 讨论(0)
  • 你的背包
    2021-01-17 15:26

    It wasn't exactly your issue, but closely related.

    I found that I had to set the mapOptions with a valid centre, like so:

    new google.maps.Map(mapCanvas, {
    center: new google.maps.LatLng(-34.397, 150.644)
});

    If I didn't enter map options, or if I did and it didn't have a valid center set, I'd get a blank map that didn't load tiles.

    0 讨论(0)
 看不清?
提交回复
热议问题