LinuxQuestions.org
Latest LQ Deal: Linux Power User Bundle
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 07-29-2017, 06:47 PM   #1
manolakis
Member
 
Registered: Nov 2006
Distribution: xubuntu
Posts: 444

Rep: Reputation: 31
Google Maps do not load


Hello,

I am trying to add google maps to my web page but unfortunately the map does not load. Can anyone see the code and please tell me what goes wrong.

Thank you.

Code:
/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
'use strict'

var locations = [
    {
        name: "Gallow Green",
        lat: 40.750746,
        long: -74.0041608
    },
    {
        name: "Two Hands",
        lat: 40.7196957,
        long: -73.9959867
    },
    {
        name: "Maman",
        lat: 40.7202789,
        long: -73.99839039999999
    },
    {
        name: "Bluestone Lane Collective Cafe",
        lat: 40.7357916,
        long: -74.0008931
    },
    {
        name: "Grounded",
        lat: 40.7380527,
        long: -74.0034182
    }
];

var map;
var clientID;
var clientSecret;
var Location = function (data) {
    var self = this;
    this.name = data.name;
    this.lat = data.lat;
    this.long = data.long;
    this.URL = "";
    this.street = "";
    this.city = "";
    this.phone = "";
    this.visible = ko.observable(true);
    var foursquareURL = 'https://api.foursquare.com/v2/venues/search?ll=' + this.lat + ',' + this.long + '&client_id=' + clientID + '&client_secret=' + clientSecret +'&v=20170730'+ '&query=' + this.name;
    $.getJSON(foursquareURL).done(function (data) {
        var results = data.response.venues[0];
        self.URL = results.url;
        if (typeof self.URL === 'undefined') {
            self.URL = "";
        }
        self.street = results.location.formattedAddress[0];
        self.city = results.location.formattedAddress[1];
        self.phone = results.contact.phone;

    }).fail(function () {
        alert("Failed to load Foursquare API.");
    });
    this.contentString = '<div class="info-window-content"><div class="title"><b>' + data.name + "</b></div>" +
            '<div class="content"><a href="' + self.URL + '">' + self.URL + "</a></div>" +
            '<div class="content">' + self.street + "</div>" +
            '<div class="content">' + self.city + "</div>" +
            '<div class="content">' + self.phone + "</div></div>";
    this.infoWindow = new google.maps.InfoWindow({content: self.contentString});
    this.marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.long),
        map: map,
        title: data.name
    });
    this.showMarker = ko.computed(function () {
        if (this.visible() === true) {
            this.marker.setMap(map);
        } else {
            this.marker.setMap(null);
        }
        return true;
    }, this);
    this.marker.addListener('click', function () {
        self.contentString = '<div class="info-window-content"><div class="title"><b>' + data.name + "</b></div>" +
                '<div class="content"><a href="' + self.URL + '">' + self.URL + "</a></div>" +
                '<div class="content">' + self.street + "</div>" +
                '<div class="content">' + self.city + "</div>" +
                '<div class="content"><a href="tel:' + self.phone + '">' + self.phone + "</a></div></div>";
        self.infoWindow.setContent(self.contentString);
        self.infoWindow.open(map, this);
        self.marker.setAnimation(google.maps.Animation.BOUNCE);
        setTimeout(function () {
            self.marker.setAnimation(null);
        }, 1500);
    });
    this.bounce = function (place) {
        google.maps.event.trigger(self.marker, 'click');
    };
};
function MarkersViewModel() {

    var self = this;
    this.searchTerm = ko.observable("");
    this.locationList = ko.observableArray([]);
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 37.370, lng: -122.002}
    });
    // Foursquare API settings
    clientID = "M13NERUVN043CZT5C0YAJRP3Q2WKDCHKDLBQR3FW21JNOFJU";
    clientSecret = "JUGSL2QL2D2OR3CVWF1FZM0ATESJXJVII40UVDNFZBQ5UNPX";
    for (var i = 0; i < locations.length; i++)
    {
        self.locationList.push(new Location(locations[i]));
    }

    this.filteredList = ko.computed(function () {
        var filter = self.searchTerm().toLowerCase();
        for (var i = 0; i < self.locationList.length; i++)
        {
            if (locations[i].name.toLowerCase().indexOf(filter) >= 0)
            {
                self.locationList[i].visible = true;
            }
        }
    }, self);

    this.mapElem = document.getElementById('map');
    this.mapElem.style.height = window.innerHeight - 50;
}

function errorHandling() {
    alert("Google Maps failed to load. Please try again.");
}


function startApp() {
    ko.applyBindings(new MarkersViewModel());
}
Code:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="search" id="search">
            <input class="search-box" id="search-box" data-bind="textInput: searchTerm, valueUpdate: 'afterkeydown'" />
        </div>
        <div class="app" id="app">
            <div class="list" id="list">
                <ul class="results" id="results" data-bind="foreach: filteredList">
                    <li class="place" id="place" data-bind="text: name, click: bounce"></li>
                </ul>
            </div>
            <div class="map" id="map">If you can read this, there has been an error loading Google Maps. Please Try Again.</div>
        </div>
        
        <script src='knockout-3.4.2.js'></script>
        <script src="jquery-1.12.0.min.js"></script>
        <script src='app.js'></script>        
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0aDB-5NbGEm3zxO-wh676SSn-KTgQTC8&callback=startApp" onerror="errorHandling()"></script>
    </body>
</html>

</body>
</html>
Code:
body {
	margin: 0;
	font-family: Verdana, Geneva, sans-serif;
}

.search {
	width: 100%;
	display: flex;
}

.search-box {
	flex-grow: 1;
	height: 50px;
	font-size: 1em;
	padding: 5px 20px;
}

.app {
	width: 100%;
	height: 100%;
	display: flex;
}

.list {
	order: 1;
	flex-grow: 1;
	background-color: #055;
}

.map {
	order: 2;
	background-color: #fff;
	text-align: center;
	height: 100%;
        width: 100%;
}

.results {
	margin: 0;
	padding: 0;
}

.place {
    margin: 10px;
    padding: 10px;
    list-style: none;
    background-color: #088;
}


@media only screen and (max-device-width : 959px), only screen and (max-width : 959px)  {

.app {
	flex-direction: column;
}


.search-box, .list {
	font-size: 1.5em;
}
 
Old 07-30-2017, 09:51 AM   #2
business_kid
LQ Guru
 
Registered: Jan 2006
Location: Ireland
Distribution: Slackware & Android
Posts: 8,257

Rep: Reputation: 827Reputation: 827Reputation: 827Reputation: 827Reputation: 827Reputation: 827Reputation: 827
Do You want us to debug your code? We'd stop you learning.
 
1 members found this post helpful.
Old 07-30-2017, 01:48 PM   #3
astrogeek
Moderator
 
Registered: Oct 2008
Distribution: Slackware [64]-X.{0|1|2|37|-current} ::12<=X<=14, FreeBSD_10{.0|.1|.2}
Posts: 4,460
Blog Entries: 6

Rep: Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397
Quote:
Originally Posted by manolakis View Post
I am trying to add google maps to my web page but unfortunately the map does not load. Can anyone see the code and please tell me what goes wrong.
"does not load" is not a very helpful description of the problem.

What have you done to troubleshoot it?

What error messages are produced?

What response does google maps return?

Members here are willing to help, but it is not appropriate to ask others to simply debug your code for you.

Please see the Site FAQ, and in particular this page and its links for help in asking a complete question.
 
Old 07-30-2017, 04:38 PM   #4
manolakis
Member
 
Registered: Nov 2006
Distribution: xubuntu
Posts: 444

Original Poster
Rep: Reputation: 31
It is strange because I do not get any debug errors.
 
Old 08-05-2017, 05:25 PM   #5
manolakis
Member
 
Registered: Nov 2006
Distribution: xubuntu
Posts: 444

Original Poster
Rep: Reputation: 31
JS Can not set property of undefined

Hello,

I have an array like the following and when I try to set the URL I get an error saying uncaught error cannot set property of undefined object
Code:
var initLocations = [
    {
        name: "Gallow Green",
        lat: 40.750746,
        long: -74.0041608,
        URL: ""
    },
    {
        name: "Two Hands",
        lat: 40.7196957,
        long: -73.9959867,
        URL: ""
    },
    {
        name: "Maman",
        lat: 40.7202789,
        long: -73.99839039999999,
        URL: ""
    },
    {
        name: "Bluestone Lane Collective Cafe",
        lat: 40.7357916,
        long: -74.0008931,
        URL: ""
    },
    {
        name: "Grounded",
        lat: 40.7380527,
        long: -74.0034182,
        URL: ""
    }
];
Code:
for (var i = 0; i < initLocations.length; i++)
    {
        var foursquareURL = 'https://api.foursquare.com/v2/venues/search?ll=' + initLocations[i].lat + ',' + initLocations[i].long + '&client_id=' + clientID + '&client_secret=' + clientSecret + '&v=20170801' + '&query=' + initLocations[i].name;

        $.getJSON(foursquareURL).done(function (data) {
            var results = data.response.venues[0];
            console.log(results.url);            
            var url = results.url;
            initLocations[i].URL = url; // The error
     }
Can anyone please explain me what can go wrong as long as the URL of each record is initilized to an empty string?

Thank you.
 
Old 08-05-2017, 07:36 PM   #6
scasey
Member
 
Registered: Feb 2013
Location: Tucson, AZ, USA
Distribution: CentOS 5.11
Posts: 334

Rep: Reputation: 122Reputation: 122
Quote:
Originally Posted by manolakis View Post
Code:
        $.getJSON(foursquareURL).done(function (data) {
            var results = data.response.venues[0];
            console.log(results.url);            
            var url = results.url;
            initLocations[i].URL = url; // The error
There appears to be an unmatched left paren in that code.
 
Old 08-05-2017, 07:53 PM   #7
astrogeek
Moderator
 
Registered: Oct 2008
Distribution: Slackware [64]-X.{0|1|2|37|-current} ::12<=X<=14, FreeBSD_10{.0|.1|.2}
Posts: 4,460
Blog Entries: 6

Rep: Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397Reputation: 2397
Please post your issue only once. Posting a single thread in the most relevant forum will make it easier for members to help you and will keep the discussion in one place. If you have new information regarding the problem, please post it to the original issue rather than opening a new thread, so that others may follow to a complete resolution in a single thread.

Your two threads have been merged.
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
Google Maps API - google Map won't load pizzipie Programming 0 01-20-2016 03:45 AM
LXer: Show Photos on Google Earth and Google Maps with*digiKam LXer Syndicated Linux News 0 10-12-2011 08:20 PM
Google maps versus Nokia's OVI maps TheIndependentAquarius General 8 05-30-2011 04:26 AM
[SOLVED] Google Maps works well in Google Chrome but not in Chromium... Robert.Thompson Slackware 1 04-13-2011 02:47 AM
LXer: Google Maps and Google Earth KML overlays LXer Syndicated Linux News 0 10-29-2008 04:30 AM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 06:10 AM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration