I am fairly new with Javascript and even more so with Knockout.JS. I am currently trying to make a map that can be filtered by search results. i.e. search bar filters map markers and a list view. I had everything working correctly but now I want to move the map load out of the viewmodel.
I tried using a function to load the map just outside the viewModel but then it messed up all the other functionality. Any suggestions or best practices on getting the map load out of the viewModel and maintaining functionality. Thanks in advance. Here is what I have so far:
var koViewModel = function() {
var self = this;
self.googleMap = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 15
});
self.allPlaces = [];
locationList.forEach(function(place) {
self.allPlaces.push(new Place(place));
});
self.allPlaces.forEach(function(place) {
var markerOptions = {
map: self.googleMap,
position: place.latLng,
animation: google.maps.Animation.DROP,
};
place.marker = new google.maps.Marker(markerOptions);
});
self.visiblePlaces = ko.observableArray();
self.allPlaces.forEach(function(place) {
self.visiblePlaces.push(place);
});
self.userInput = ko.observable('');
self.filterMarkers = function() {
var searchInput = self.userInput().toLowerCase();
self.visiblePlaces.removeAll();
self.allPlaces.forEach(function(place) {
place.marker.setMap(null);
if (place.name.toLowerCase().indexOf(searchInput) !== -1) {
self.visiblePlaces.push(place);
}
});
self.visiblePlaces().forEach(function(place) {
place.marker.setMap(self.googleMap);
});
};
function Place(dataObj) {
this.name = dataObj.name;
this.latLng = dataObj.latLng;
this.marker = null;
}
};
ko.applyBindings(new koViewModel());
I am fairly new with Javascript and even more so with Knockout.JS. I am currently trying to make a map that can be filtered by search results. i.e. search bar filters map markers and a list view. I had everything working correctly but now I want to move the map load out of the viewmodel.
I tried using a function to load the map just outside the viewModel but then it messed up all the other functionality. Any suggestions or best practices on getting the map load out of the viewModel and maintaining functionality. Thanks in advance. Here is what I have so far:
var koViewModel = function() {
var self = this;
self.googleMap = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 15
});
self.allPlaces = [];
locationList.forEach(function(place) {
self.allPlaces.push(new Place(place));
});
self.allPlaces.forEach(function(place) {
var markerOptions = {
map: self.googleMap,
position: place.latLng,
animation: google.maps.Animation.DROP,
};
place.marker = new google.maps.Marker(markerOptions);
});
self.visiblePlaces = ko.observableArray();
self.allPlaces.forEach(function(place) {
self.visiblePlaces.push(place);
});
self.userInput = ko.observable('');
self.filterMarkers = function() {
var searchInput = self.userInput().toLowerCase();
self.visiblePlaces.removeAll();
self.allPlaces.forEach(function(place) {
place.marker.setMap(null);
if (place.name.toLowerCase().indexOf(searchInput) !== -1) {
self.visiblePlaces.push(place);
}
});
self.visiblePlaces().forEach(function(place) {
place.marker.setMap(self.googleMap);
});
};
function Place(dataObj) {
this.name = dataObj.name;
this.latLng = dataObj.latLng;
this.marker = null;
}
};
ko.applyBindings(new koViewModel());
- Your snippet needs Knockout enabled. – Roy J Commented Oct 2, 2015 at 12:40
1 Answer
Reset to default 9You could consider the following approach:
a)initialize the map once an HTML page is fully loaded
b)apply bindings and pass map object via viewModel
google.maps.event.addDomListener(window, 'load', function(){
var locationList = [
{ name: 'New York', latLng: { lat: 40.786998, lng: -73.975664 } },
{ name: 'San Francisco', latLng: { lat: 37.763061, lng: -122.431935 } },
{ name: 'Los Angeles', latLng: { lat: 34.079078, lng: -118.242818 } }
];
var googleMap = createMap();
ko.applyBindings(new koViewModel(googleMap,locationList));
});
Example
var koViewModel = function(map,locationList) {
var self = this;
self.googleMap = map;
self.allPlaces = [];
locationList.forEach(function(place) {
self.allPlaces.push(new Place(place));
});
self.allPlaces.forEach(function(place) {
var markerOptions = {
map: self.googleMap,
position: place.latLng,
animation: google.maps.Animation.DROP,
};
place.marker = new google.maps.Marker(markerOptions);
});
self.visiblePlaces = ko.observableArray();
self.allPlaces.forEach(function(place) {
self.visiblePlaces.push(place);
});
self.userInput = ko.observable('');
self.filterMarkers = function() {
var searchInput = self.userInput().toLowerCase();
self.visiblePlaces.removeAll();
self.allPlaces.forEach(function(place) {
place.marker.setMap(null);
if (place.name.toLowerCase().indexOf(searchInput) !== -1) {
self.visiblePlaces.push(place);
}
});
self.visiblePlaces().forEach(function(place) {
place.marker.setMap(self.googleMap);
});
};
function Place(dataObj) {
this.name = dataObj.name;
this.latLng = dataObj.latLng;
this.marker = null;
}
};
function createMap() {
return new google.maps.Map(document.getElementById('map'), {
center: { lat: 40.166294, lng: -96.389016 },
zoom: 4
});
}
google.maps.event.addDomListener(window, 'load', function(){
var locationList = [
{ name: 'New York', latLng: { lat: 40.786998, lng: -73.975664 } },
{ name: 'San Francisco', latLng: { lat: 37.763061, lng: -122.431935 } },
{ name: 'Los Angeles', latLng: { lat: 34.079078, lng: -118.242818 } }
];
var googleMap = createMap();
ko.applyBindings(new koViewModel(googleMap,locationList));
}); html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 5%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
} <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maps.googleapis./maps/api/js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div id="floating-panel">
<b>Place: </b>
<input data-bind="value: userInput" />
<button data-bind="click: filterMarkers">Filter</button>
</div>
<div id="map"></div>