Mazzone Mazzone - 23 days ago 7
HTML Question

Google Map JS Not Showing (tried other answers)

I'm working on a site that will use the Google Maps / Places APIs. I have verified that my API key is working fine, so that's not an issue. I just can't even get the map to display - that's my issue.

I've copied the example exactly, and it still won't work.

Here's my code in a gist because it's a few files. It should be runnable, that's all the content.

What I've tried so far:

- Putting it all in a document ready function (jQuery).

- Taking it out of the getCurrentPosition function so it was just out in the main.js file.

- Moving the position of the script link in my HTML file, nothing changed at any position.

- If I console.log() the lat and long variables, they print my location. But they're "undefined" when I type them into Chrome Dev Tools console. However, my "map" variable prints the map div to console.

- Using static coords, rather than coords gathered from the navigator HTML5 element.

- Setting height and width for the map div with pixels, percent, and vh/vw. It's taking the screen - I know because I gave it a background color that is showing.

- Added parameters to the end of my API load:

&callback=initialize&libraries=places


This is my first time using Maps, so I'm totally lost here. I followed Google's example to a tee, and still nothing.

WebStorm is underlining all of the google.maps.x classes and saying they're "unresolved variables or types". That may be my problem, but I don't know what causes that or how to fix it. And to be clear, I have looked through every article I could find on Stack Overflow related to this, and haven't found a solution.

UPDATE:

- I just tried copying and pasting this example from Google exactly as it appears (with my API key, of course), and it still didn't work. I put it in script tags in my HTML. The only way it works is if I delete the
initMap()
function - not the contents of it, just the declaration of it as a function. So why is the scope acting so weird here? It's treating everything inside of the function (which is in a script tag in my HTML) as if it's all undefined just because it's in a function... at the highest scope level.

Answer

You are trying to run main.js before the Google Maps SDK has loaded. Move it above main.js' inindex.html`:

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDDDu1KTU2F_xndfbaSTMwxz66qOfUPfVY&libraries=places"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

Then, remove the initialize function:

if ("geolocation" in navigator) {
console.log("Geolocation is enabled.");
navigator.geolocation.getCurrentPosition(function (position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    var map;
    var service;
    var infoWindow;

    console.log("lat: " + lat);

    //Initialize Google Map. Starts at user's location.

        var userLocation = new google.maps.LatLng(lat, long);

        map = new google.maps.Map(document.getElementById('map'), {
            center: userLocation,
            zoom: 15
        });

        var request = {
            location: userLocation,
            radius: '500',
            types: ['store']
        };

        service = new google.maps.places.PlaceService(map);
        service.nearbySearch(request, callback);


    //Callback function for nearbySearch
    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                var place = results[i];
                createMarker(results[i]);
            }
        }
    }
});
} else {
console.log("Geolocation is disabled.");
//Inform user why we use location
//Allow user to enter location manually
} 

That works for me.