Ask Question Sign In Sign Up

How to bind checkboxes to google maps markers using knockout.js?

Member

by adan , in category: Javascript , 3 months ago

How to bind checkboxes to google maps markers using knockout.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by lottie , 3 months ago

@adan 

To bind checkboxes to Google Maps markers using Knockout.js, you can follow these steps:

  1. Create an HTML file with the checkboxes and Google Maps API integration:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html>
<head>
    <title>Checkbox Google Maps Binding</title>

    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>

    <h3>Choose markers to display:</h3>
    <input type="checkbox" value="marker1" data-bind="checked: markersToShow"> Marker 1
    <input type="checkbox" value="marker2" data-bind="checked: markersToShow"> Marker 2
    <input type="checkbox" value="marker3" data-bind="checked: markersToShow"> Marker 3

    <div id="map"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
    <script src="knockout.min.js"></script>
    <script src="script.js"></script>
</body>
</html>


  1. Create a JavaScript file (e.g. script.js) that initializes the Google Map and binds checkboxes to markers using Knockout.js:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// Hardcoded marker positions
var markers = [
    { position: {lat: 37.7749, lng: -122.4194}, title: 'Marker 1' },
    { position: {lat: 37.7749, lng: -122.4194}, title: 'Marker 2' },
    { position: {lat: 37.7749, lng: -122.4194}, title: 'Marker 3' }
];

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 37.7749, lng: -122.4194}
    });

    var viewModel = {
        markersToShow: ko.observableArray([]),
        markers: markers.map(function(marker) {
            var googleMarker = new google.maps.Marker({
                position: marker.position,
                title: marker.title,
                map: map
            });

            googleMarker.setVisible(false); // Hide marker by default

            return googleMarker;
        })
    };

    viewModel.markersToShow.subscribe(function() {
        ko.utils.arrayForEach(viewModel.markers(), function(marker, index) {
            if(viewModel.markersToShow().indexOf('marker' + (index + 1)) !== -1) {
                marker.setVisible(true);
            } else {
                marker.setVisible(false);
            }
        });
    });

    ko.applyBindings(viewModel);
}


  1. Include Knockout.js library in your project. You can either download it and include it in your project or use a CDN link.
  2. Replace YOUR_API_KEY in the Google Maps API script tag with your own API key.
  3. Run the HTML file in a browser and you will see checkboxes for each marker. By checking or unchecking the checkboxes, you can show or hide the corresponding markers on the Google Map.

Related Threads:

How to filter google map markers with knockout.js?
How to add google maps in joomla?
How to bind array of objects from promise knockout.js?
How to bind focusout event to knockout.js?
How to bind two events to an element in knockout.js?
How to put data into nested array and bind it to html in knockout.js?