JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas"></div>

CSS

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var map;
var markers = [];
var bounds = new google.maps.LatLngBounds();

function initMap() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 14,
    center: new google.maps.LatLng(33.6894120, -117.9872660),
    mapTypeId: 'roadmap',
    disableDefaultUI: true
  });

  function addMarker(feature) {
    var marker = new google.maps.Marker({
      position: feature.position,
      map: map,
      type: feature.type,
      description: feature.description
    });
    bounds.extend(marker.getPosition());
    map.fitBounds(bounds);
    var infoWindow = new google.maps.InfoWindow({});
    marker.addListener('click', function() {
      map.setCenter(marker.getPosition());

      infoWindow.setContent(marker.description);
      infoWindow.open(map,marker);

      google.maps.event.addListener(map, 'drag', function() {
        infoWindow.close();
      });
      google.maps.event.addListener(map, 'click', function() {
        infoWindow.close();
      });
    });
    markers.push(marker);
  }

  filterMarkers = function(getType) {
    //console.log(getType);
    for (var i = 0; i < markers.length; i++) {
      if (markers[i].type == getType || getType == "") {
        markers[i].setVisible(true);
      } else {
        markers[i].setVisible(false);
      }
    }
  }

  var features = [

    {
      position: new google.maps.LatLng(-33.91721, 151.22630),
      type: 'type1',
      description: 'Description1'
    }, {
      position: new google.maps.LatLng(-33.91721, 151.2),
      type: 'type2',
      description: 'Description2'
    }, {
      position: new google.maps.LatLng(-33.9, 151.22630),
      type: 'type3',
      description: 'Description3'
    }

  ];

  for (var i = 0; i < features.length; i++) {
    addMarker(features[i]);
  }
}

$(document).ready(function() {
  initMap();
});