Google地图容器显示为没有地图

问题描述

我知道这已经被问过很多次了，但是我看到的其他答案似乎没有帮助我。基本上，地图的容器显示（作为页面上的500x300px空白区域），但没有地图。无论我做什么，我都无法让地图显示。

I'm aware that this has been asked plenty of times before, however none of the other answers I've seen seem to help me. Basically, the container for the map shows (as a 500x300px white space on the page) but there's no map. No matter what I do, I can't get the map to show.

正如您大概猜测的那样，我对Google地图不熟悉，因此不胜感激。我已经设置了一个缩放，其中包括溢出：可见，这是另一个建议，除其他外。

As you can probably guess, I'm unfamiliar with Google Maps so any help is appreciated. I've set a zoom and included "overflow: visible" which was another suggestion, amongst other things.

希望这个小提琴可以工作：

Hopefully this fiddle works: https://jsfiddle.net/7cvj565j/

findafter.php - 显示地图

<div class="container text-center">
    <div class="row">
        <div class="col-sm-8">
            <div id="map-container">
                <div id="googleMap" style="height:300px; width:500px;">
                    <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap" async defer></script>
                    <script src="includes/findafitter2.js"></script>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            Enter your postcode to find your nearest fitter. Do you have any questions? <a href="contact.php">Let us know!</a>
            <input id="address" type="textbox" value="">
            <input type="button" value="Find My Nearest Fitter" onclick="checkZip(getElementById('address').value)">
        </div>
    </div>
</div>

findafitter2.js - 地图代码

var geocoder;
var map;
var markers = [];

function initialize()
{
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(40.768505, -111.853244);
    var myOptions =
    {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
    addPostCode('84101');
    addPostCode('84102');
    addPostCode('84103');
    addPostCode('84104');
    addPostCode('84105');
}

function addPostCode(zip)
{
    geocoder.geocode( { 'address': zip}, 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,
                name: zip
            });
            markers.push(marker);
        }
        else
        {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

function checkZip(zip)
{
    var distance = Number.MAX_VALUE;
    var index = 0;
    geocoder.geocode( { 'address': zip}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK)
        {
            for(ix=0; ix< markers.length; ix++)
            {
                var tmp = getDistance(results[0].geometry.location, markers[ix].position);
                if (tmp < distance)
                {
                    distance = tmp;
                    index = ix;
                }
            }
            alert('nearest zipcode is :' + markers[index].name);
        }
    });
}

function getDistance(latlng1, latlng2)
{
    var R = 6371; // Radius of the earth in km
    var dLat = (latlng2.lat()-latlng1.lat()) * Math.PI / 180;  // Javascript functions in radians
    var dLon = (latlng2.lng()-latlng1.lng()) * Math.PI / 180;
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(latlng1.lat()  * Math.PI / 180) * Math.cos(latlng2.lat()  * Math.PI / 180) *
            Math.sin(dLon/2) * Math.sin(dLon/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c; // Distance in km
    d = d * 0.621371192; // convert to miles
    return d;
}

styles.css - 相关位

styles.css - the relevant bit

#map-container
{
    min-height: 300px;
    color: #000000;
    overflow: visible;
}

Google地图代码取自另一个SO帖子（），以查看我的地图代码是否破坏它 - 这与我将要做的非常相似在做，而且这些代码适用于很多人。

The Google Maps code was taken from another SO post (Google maps - Postcode plotting) to see if my map code was breaking it - this is quite similar to what I'll be doing and that code works for numerous people.

希望这已经够清楚了。提前致谢！

Hopefully that's clear enough. Thanks in advance!

推荐答案

这可能不适合你，因为API密钥不正确，或者它与你使用的div和样式有关。
在您的网页上放置地图的最简单方法是在Google地图上搜索位置，根据需要自定义大小，并将嵌入代码作为iframe。

It might be that is not working for you because the API key is not correct or it's something about the divs and the styling that you're using.The easiest way to place the map on your webpage is to search the location on google maps, customize the size as you need and get the embedded code as iframe.

1. Search the wanted location on Google maps
2. Choose "Share or embed map" from the top-right "hamburger" menu
3. Choose "Embed map" tab > "Custom size"
and you have the iframe code.

这篇关于Google地图容器显示为没有地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！