frontend-neighborhood-map/js/app.js
// mapMarker object to hold information about a map point.
mapMarker object to hold information about a map point.
mapMarker object to hold information about a map point .
function mapMarker(name, type, lat, long, show, venueId) {
    'use strict';
    var self = this;
    self.name = name;
    self.type = type;
    self.show = ko.observable(show);
    self.venueId = venueId;
    self.lat = ko.observable(lat);
    self.long = ko.observable(long);
    self.latLng = new google.maps.LatLng(lat, long);
    self.marker = new google.maps.Marker({
        position: self.latLng,
        title: name,
        map: map,
        draggable: false
    });
    self.openInfoWindow = function(){
        infoWindow.setContent("<div id='content'></div>");
        infoWindow.open(map,self.marker);
        self.marker.setAnimation(google.maps.Animation.BOUNCE);
        setTimeout(function(){self.marker.setAnimation(null);}, 1400);
        getInfoWindowContent(self.marker);
    };
    google.maps.event.addListener(self.marker, 'click', self.openInfoWindow);
    self.updateShow = function(show){
        self.show(show);
        if(show){
            self.marker.setVisible(true);
        }else{
            self.marker.setVisible(false);
            }
    };
    function getInfoWindowContent(){
        var fourSquareUrl = 'https://api.foursquare.com/v2/venues/'+ venueId+
        '?client_id=XKVOFWGXXGYN0A2VUP3EZS1AILPGFW3PUEG1LDQVKKSNWZGE'+
        '&client_secret=VXY2XQTDWT4VJF2DR4FR2YT5TYZJOURCFGPWD1NR4OZZL5IZ'+
        '&v=20130815';
            $.getJSON(fourSquareUrl, function(response) {
            var venue = response.response.venue;
            var venueName = venue.name;
            var address = venue.location.formattedAddress;
            var phone = venue.contact.formattedPhone;
            var website = venue.url;
            var contentString = "";
            venueName ? venueName= (contentString += '<p>' + venueName + '</p>') : (contentString+='<p> Unable to find location name </p>');
            address ? address= (contentString += '<p>' + address + '</p>') : (contentString+='<p> Address unlisted </p>');
            phone ? phone= (contentString += '<p>' + phone + '</p>') : (contentString+='<p> Phone number unlisted </p>');
            website ? website= (contentString += '<p>' + website + '</p>') : (contentString+='<p> Website unlisted </p>');
            infoWindow.setContent(contentString);
        }).error(function(e) {
            infoWindow.setContent('Sorry!! There was an error loading data from Foursquare!');
        });
    }
}
function mapMarker ( name , type , lat , long , show , venueId ) { 'use strict' ; var self = this ; self . name = name ; self . type = type ; self . show = ko . observable ( show ) ; self . venueId = venueId ; self . lat = ko . observable ( lat ) ; self . long = ko . observable ( long ) ; self . latLng = new google . maps . LatLng ( lat , long ) ; self . marker = new google . maps . Marker ( { position : self . latLng , title : name , map : map , draggable : false } ) ; self . openInfoWindow = function ( ) { infoWindow . setContent ( "<div id='content'></div>" ) ; infoWindow . open ( map , self . marker ) ; self . marker . setAnimation ( google . maps . Animation . BOUNCE ) ; setTimeout ( function ( ) { self . marker . setAnimation ( null ) ; } , 1400 ) ; getInfoWindowContent ( self . marker ) ; } ; google . maps . event . addListener ( self . marker , 'click' , self . openInfoWindow ) ; self . updateShow = function ( show ) { self . show ( show ) ; if ( show ) { self . marker . setVisible ( true ) ; } else { self . marker . setVisible ( false ) ; } } ; function getInfoWindowContent ( ) { var fourSquareUrl = 'https://api.foursquare.com/v2/venues/' + venueId + '?client_id=XKVOFWGXXGYN0A2VUP3EZS1AILPGFW3PUEG1LDQVKKSNWZGE' + '&client_secret=VXY2XQTDWT4VJF2DR4FR2YT5TYZJOURCFGPWD1NR4OZZL5IZ' + '&v=20130815' ; $ . getJSON ( fourSquareUrl , function ( response ) { var venue = response . response . venue ; var venueName = venue . name ; var address = venue . location . formattedAddress ; var phone = venue . contact . formattedPhone ; var website = venue . url ; var contentString = "" ; venueName ? venueName = ( contentString += '<p>' + venueName + '</p>' ) : ( contentString += '<p> Unable to find location name </p>' ) ; address ? address = ( contentString += '<p>' + address + '</p>' ) : ( contentString += '<p> Address unlisted </p>' ) ; phone ? phone = ( contentString += '<p>' + phone + '</p>' ) : ( contentString += '<p> Phone number unlisted </p>' ) ; website ? website = ( contentString += '<p>' + website + '</p>' ) : ( contentString += '<p> Website unlisted </p>' ) ; infoWindow . setContent ( contentString ) ; } ) . error ( function ( e ) { infoWindow . setContent ( 'Sorry!! There was an error loading data from Foursquare!' ) ; } ) ; } }
mapMarker object to hold information about a map point.
mapMarker object to hold information about a map point .
/*** Shows a Bouncing animation when the marker is clicked ***/ // Create the new info window and populate with information // Writes data into info window. // self.marker.setMap( map ); // self.marker.setMap( null ); // Begin JSON request // var $infoWindowContent = $('#content'); // var $infoWindowContent = infoWindow.setContent();