JSFiddle - React, Tailwind, and code Playground

by designworksinteractive

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
<title>Google Maps Multiple Markers</title> 

<body>
<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);">
    
  <script type="text/javascript">
    var locations = [
    ['Bondi <img src="smiley.gif" alt="Smiley face" height="42" width="42">', -34.860542, 151.274856, 2], //category 1
      ['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, 1]
            ];

  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: 3,
      center: new google.maps.LatLng(51.530616, -0.123125),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var infowindow = new google.maps.InfoWindow();

    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]);
          infowindow.open(map, marker);
        }
     ...