blank page - Google Maps API tutorial

Javascript coding ..

Moderators: egami, macek, gesf

Post Reply
dfry
New php-forum User
New php-forum User
Posts: 8
Joined: Tue May 03, 2016 12:20 pm

Sat May 07, 2016 8:36 pm

I'm following this tutorial about using the google maps api to display a map with markers showing the locations of cafes within an 8 mile radius of a set of lat/long coordinates. I cannot for the life of me figure out why I'm getting a blank page. The tutorial uses Sublime Text as a text editor so i downloaded it just to compare my code with the code in the video. www. youtube. com/watch?v=zVU_MQyKFGg The one thing I noticed was line 12 map = new google.maps.Map(document.getElementById('map'), {. getElementById is blue in the video but it's white in mine, I'm not sure if that means anything.

Code: Select all

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=1234">
        </script>
        <script>
        var map;
        function initialize() {
            var center = new google.maps.LatLng(37.422, -122.084058);
            map = new google.maps.Map(document.getElementById('map'), {
                center: center,
                zoom: 12
                
            });
            
            var request = {
                location: center,
                radius: 8047,
                types: ['cafe']
            };
            
            var service = new google.maps.places.PlacesService(map);
            
            service.nearbySearch(request, callback);
        }
        
        function callback(results, status) {
            if(status == google.maps.places.PlacesServiceStatus.OK){
                for (var i = 0, i < results.length; i++){
                    createMarker(results[i]);
                }
            }
        }
        
        function createMarker(place) {
            var placeLoc = place.geometry.location;
            var marker = new google.maps.Marker({
                map: map,
                position: place.geomtery.location
            });
        
        }
        
        google.maps.event.addDomListener(window, 'load', initialize);
        
        </script>
        
        <style>
        html, body, #map {
                height: 100%;
                margin: 0px;
                padding: 0px;
        }
        </style>
    </head>
    <body>
        <div id="map">
        </div>
    </body>
</html>
Top
User avatar
hyper
php-forum GURU
php-forum GURU
Posts: 1190
Joined: Mon Feb 22, 2016 5:52 pm

Sun May 08, 2016 4:04 am

I'm not saying it's problem solved, but I don't think the comma belongs on the end of this line:

Code: Select all

map = new google.maps.Map(document.getElementById('map'), {
Should read:

Code: Select all

map = new google.maps.Map(document.getElementById('map') {
Top
dfry
New php-forum User
New php-forum User
Posts: 8
Joined: Tue May 03, 2016 12:20 pm

Sun May 08, 2016 2:50 pm

hyper wrote:I'm not saying it's problem solved, but I don't think the comma belongs on the end of this line:

If I leave just this bit of code the map will load. As soon as I add the two additional functions (callback and createMarker) and the two additional variables (request and service) to show locations of cafes it comes up blank.

Code: Select all

var map;
        function initialize() {
            var center = new google.maps.LatLng(37.422, -122.084058);
            map = new google.maps.Map(document.getElementById('map', {
                center: center,
                zoom: 12
                
            });
    
        
        }
        
        google.maps.event.addDomListener(window, 'load', initialize);
Top
dfry
New php-forum User
New php-forum User
Posts: 8
Joined: Tue May 03, 2016 12:20 pm

Sun May 08, 2016 3:52 pm

Loaded firebug and the error console plugins in Firefox and got a syntax error "missing ; after for-loop initializer". Saw that there was a , instead of ; then I was getting an error place.geomtery undefined, turned out to be a spelling error (geometry instead of geomtery). Below is the correct code if someone comes across this thread.

Code: Select all

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=1234">
        </script>
        <script>
        var map;
        function initialize() {
            var center = new google.maps.LatLng(37.422, -122.084058);
            map = new google.maps.Map(document.getElementById('map'), {
                center: center,
                zoom: 12
                
            });
            
            var request = {
                location: center,
                radius: 2047,
                types: ['cafe']
            };
            
            var service = new google.maps.places.PlacesService(map);
            
            service.nearbySearch(request, callback);
        }
        
        function callback(results, status) {
            if(status == google.maps.places.PlacesServiceStatus.OK){
                for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                }
            }
        }
        
        function createMarker(place) {
            var placeLoc = place.geometry.location;
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });
        
        }
        
        google.maps.event.addDomListener(window, 'load', initialize);
        
        </script>
        
        <style>
        html, body, #map {
                height: 100%;
                margin: 0px;
                padding: 0px;
        }
        </style>
    </head>
    <body>
        <div id="map">
        </div>
    </body>
</html>
Top
Post Reply

Return to “JavaScript”