javascript - Using Knockout.JS and Google maps API - Stack Overflow

admin管理员组

文章数量:1387437

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());

• javascript
• google-maps
• google-maps-api-3
• knockout.js

Share Improve this question Follow edited Jul 25, 2017 at 6:55 Nerdroid 14k55 gold badges6161 silver badges7171 bronze badges asked Oct 2, 2015 at 2:01 Boby LightBoby Light 2111 silver badge22 bronze badges 1

• Your snippet needs Knockout enabled. – Roy J Commented Oct 2, 2015 at 12:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You 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>

本文标签： javascriptUsing KnockoutJS and Google maps APIStack Overflow