A Knockout way of communicating and initializing a google map

knockout.google.map.js

var app = app || {};
app.google = app.google || {};

app.google.map = (function ($) {
    var model = {
        markers: [],
        initialized: ko.observable(false),
        infoWindow: null,
        apiLoaded: ko.observable(false)
    };

    var map;
    var infoWindow;

    model.refocusMap = function (lat, lng) {
        if (lat != undefined && lng != undefined)
        {
            var center = new google.maps.LatLng(lat, lng);
            map.panTo(center);
        }
    };

    model.setMarkersMap = function (marker) {
        marker.setMap(map);
    };

    model.setMap = function (markers) {
        for (i = 0; i < markers.length; i++)
            markers[i].setMap(map);
    };

    model.createMarker = function (point) {
        var marker = new google.maps.Marker({
            icon: {
                path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                scale: 2,
                strokeColor: '#1D1919',
                strokeWeight: 4
            },
            position: {lng: parseFloat(point.position.lng), lat: parseFloat(point.position.lat)},
            title: point.title,
            category: point.category
        });

        return marker;
    };

    model.setEventHandler = function (marker, point) {
        google.maps.event.addListener(marker, "click", (function (marker, point) {
            return function () {
                model.infoWindow.setContent(point.content);
                model.infoWindow.open(map, marker);
            }
        })(marker, point));
    };

    model.addMarker = function (point) {
        var marker = this.createMarker(point);
        marker.setMap(map);
        google.maps.event.addListener(marker, 'click', (function (marker, point) {
            return function () {
                model.infoWindow.setContent(point.content);
                model.infoWindow.open(map, marker);
            }
        })(marker, point));
        model.markers.push(marker);
    }

    model.setPointMarker = function (point) {
        var marker = this.createMarker(point);
        marker.setMap(map);
        //model.markers.push(marker);
        this.setEventHandler(marker, point);
    };

    model.addMarkers = function (points) {

        for(i = 0; i < points.length; i++)
        {
            var marker = this.createMarker(points[i]);
            var marker = new google.maps.Marker({
                icon: {
                    path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                    scale: 2,
                    strokeColor: '#1D1919',
                    strokeWeight: 4
                },
                position: {lng: parseFloat(points[i].position.lng), lat: parseFloat(points[i].position.lat)},
                title: points[i].title,
                category: points[i].category
            });
            marker.setMap(map);
            model.markers.push(marker);
        }
        for (i = 0; i < model.markers.length; i++) {
            var marker = model.markers[i];
            var point = points[i];
            google.maps.event.addListener(marker, 'click', (function (marker, point) {
                return function () {
                    model.infoWindow.setContent(point.content);
                    model.infoWindow.open(map, marker);
                }
            })(model.markers[i], point));
        }
    };

    // Used in callbacks.
    // Unlike the initMap function used in callbacks, by specifying this function to be called back, devs can be
    // notified when the Google Map API has been loaded and in combination with loadMap() be allowed the flexibiliity 
    // to specify when the map is created outside of this model.
    model.mapAPILoaded = function () {
        model.apiLoaded(true);
    };


    // Initializes map.
    model.loadMap = function () {
        var mapOptions = {
            zoom: 9,
            center: new google.maps.LatLng(40.445, -79.995),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            minZoom: 9,
            maxZoom: 13,
            panControl: false,
            streetViewControl: false
        };

        map = new google.maps.Map(document.getElementById('map'), mapOptions);

        google.maps.visualRefresh = true;
        var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
          (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
        if (isMobile) {
            var viewport = document.querySelector("meta[name=viewport]");
            viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
        }

        if (isMobile) {
            var legend = document.getElementById('googft-legend');
            var legendOpenButton = document.getElementById('googft-legend-open');
            var legendCloseButton = document.getElementById('googft-legend-close');
            if (legend != null) {
                legend.style.display = 'none';
                legendOpenButton.style.display = 'block';
                legendCloseButton.style.display = 'block';
                legendOpenButton.onclick = function () {
                    legend.style.display = 'block';
                    legendOpenButton.style.display = 'none';
                }
                legendCloseButton.onclick = function () {
                    legend.style.display = 'none';
                    legendOpenButton.style.display = 'block';
                }
            }
        }
        this.infoWindow = new google.maps.InfoWindow();
        model.initialized(true);
    }

    // Used in callbacks. Initializes map.
    model.initMap = function () {
        model.apiLoaded(true);

        var mapOptions = {
            zoom: 9,
            center: new google.maps.LatLng(40.445, -79.995),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            minZoom: 9,
            maxZoom: 13,
            panControl: false,
            streetViewControl: false
        };

        map = new google.maps.Map(document.getElementById('map'), mapOptions);

        google.maps.visualRefresh = true;
        var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
          (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
        if (isMobile) {
            var viewport = document.querySelector("meta[name=viewport]");
            viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
        }

        if (isMobile) {
            var legend = document.getElementById('googft-legend');
            var legendOpenButton = document.getElementById('googft-legend-open');
            var legendCloseButton = document.getElementById('googft-legend-close');
            if (legend != null)
            {
                legend.style.display = 'none';
                legendOpenButton.style.display = 'block';
                legendCloseButton.style.display = 'block';
                legendOpenButton.onclick = function () {
                    legend.style.display = 'block';
                    legendOpenButton.style.display = 'none';
                }
                legendCloseButton.onclick = function () {
                    legend.style.display = 'none';
                    legendOpenButton.style.display = 'block';
                }
            }
        }
        this.infoWindow = new google.maps.InfoWindow();

        model.initialized(true);
    };

    return model;

})(jQuery);