JSFiddle - React, Tailwind, and code Playground

by designworksinteractive

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
<div id="map" style="width: auto; height: 300px;"></div> 
 <label>place</label><input type="checkbox"  value="Show Group 1" onclick="displayMarkers(this,1);">
    <label>hotel</label><input type="checkbox" value="Show Group 2" onclick="displayMarkers(this, 2);">

JavaScript

var locations = [
      ['Bondi', -37.860542, 151.274856, 2], //category 1
      ['Coogee', -33.923036, 157.259052, 2],  //category 1
      ['Cronulla locations', -34.028249, 154.157507, 2],  //category 2
      ['Manly locations', -33.800101, 151.287478, 2],   //category 2 
      ['Maroubra locations', -33.950198, 151.259302, 2]   //category 2
    ];
    
    var icons = ["",
    "http://86.151.70.104:10200/IMAGES/Images-Maps-Icon/place.png",
    "http://86.151.70.104:10200/IMAGES/Images-Maps-Icon/hotel.png"];

    var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 10,
       center: new google.maps.LatLng(-33.88, 151.28),
       mapTypeId: google.maps.MapTypeId.TERRAIN
    });
    
   var infowindow = new google.maps.InfoWindow();

    var marker = [];

  var marker, i;
    var markers = new Array();

    for (i = 0; i < locations.length; i++) {
      Marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: icons[locations[i][3]],
    });

    Marker.category = locations[i][3];
    Marker.setVisible(true);

    markers.push(Marker);
      
     
     google.maps.event.addListener(marker, 'mouseover', (function(Marker, i) {
        return function() {
          infowindow.setContent(locations[i][0][3]);
          infowindow.open(map, Marker);
        }
      })(Marker, i));
    }

    function AutoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      $.each(markers, function (index, marker) {
      bounds.extend(marker.position);
      });
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }
    AutoCenter();

     
       function displayMarkers(obj,category) {
         var i;

         for (i = 0; i < markers.length; i++)
            
                 if (markers[i].category === category) {
                     if ($(obj).is(":checked")) {

                 ...