Question

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

正如您可能猜到的那样，我对谷歌地图不熟悉，所以我们非常感谢您的帮助。我设置了一个缩放，包括“溢出：可见”，这是另一个建议，等等。

希望这个小提琴起作用：https://jsfiddle.net/7cvj565j/

findafitter.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 - 相关位

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

Google地图代码来自另一个SO帖子（Google maps - Postcode plotting），以查看我的地图代码是否破坏了它 - 这与我将要做的非常相似，并且该代码适用于很多人。< / p>

希望这很清楚。提前谢谢！

Answer 1

在Google地图中搜索您想要的位置。
点击＆＃34;分享＆＃34;
点击＆＃34;嵌入地图＆＃34;
Google地图会自动生成iframe供您使用

告诉我你对这种方法的看法！

似乎比从另一个StackOverflow帖子中获取谷歌地图代码并尝试使其工作更好。

＆＃13;

<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2965.0824050173574!2d-93.63905729999999!3d41.998507000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sWebFilings%2C+University+Boulevard%2C+Ames%2C+IA!5e0!3m2!1sen!2sus!4v1390839289319" width="100%" height="300px" frameborder="0" style="border:0"></iframe>

＆＃13;

Answer 2

iframe选择最简单，但我认为你需要JS版本。 https://jsfiddle.net/scorpio777/af2nzqh1/

这可能不适合您，因为API密钥不正确，或者它与您正在使用的div和样式有关。在地图上放置地图的最简单方法是搜索Google地图上的位置，根据需要自定义尺寸，并将嵌入代码设为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地图容器显示时没有地图

2 个答案: