Skip to content

Instantly share code, notes, and snippets.

@bh3605
Created September 28, 2017 18:55
Show Gist options
  • Save bh3605/ef982c61959e8edb23cdfdb1b3aecc0e to your computer and use it in GitHub Desktop.
Save bh3605/ef982c61959e8edb23cdfdb1b3aecc0e to your computer and use it in GitHub Desktop.
A Knockout way of communicating and initializing a google map
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment