CODEWITHSUNDEEP
javascripthtmlcssgoogle-mapsgoogle-maps-api-3
lcolli98
lcolli98

Reputation: 169

Google Map container shows with no map

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.

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/

findafitter.php - where the map is displayed

<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 - the code for the map

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 - the relevant bit

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

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!

Upvotes: 2

Views: 1830

Answers (2)

DanielaB67
DanielaB67

Reputation: 442

The iframe choice is the easiest, but I thought you need the JS version. https://jsfiddle.net/scorpio777/af2nzqh1/

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.

Upvotes: 2

Ricky Dam
Ricky Dam

Reputation: 1895

  1. Search your wanted location in Google Maps.
  2. Click on "Share"
  3. Click on "Embed map"
  4. Google maps will autogenerate an iframe for you to use

Tell me what you think of this method!

Seems better than taking the google maps code from another StackOverflow post and trying to make it work.

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

Upvotes: 2

Related Questions