JSFiddle - React, Tailwind, and code Playground

by kanapkazpasztetem

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="excersise excersise-2">
  <p class="excersise-txt"></p>
  <div class="gmaps">
    <!-- 
      Lets assume that marker class divs are generated and have their content filled in a loop in a php script. Second class name in span is generated based on some data.
      For some reason user didnt filled all data and this div was generated. Try to fix this issue with using js/jQuery and your knowledge about exceptions. -->
    <div class="marker" data-lat="" data-lng="" data-stuff="">Problematic marker<span class="stuff stuff-">Some stuff</span></div>

    <div class="marker" data-lat="50.2206000" data-lng="18.6748600" data-stuff="stuff-hq">Headquarters<span class="stuff stuff-hq">Some stuff</span></div>
    <div class="marker" data-lat="50.2203000" data-lng="18.6745000" data-stuff="stuff-m1">Marker 1<span class="stuff stuff-m1">Some stuff</span></div>

  </div>
</div>

CSS

.gmaps {
  width: 100%;
  height: 300px;
  background: red;
}

JavaScript

function add_marker( $marker, map ) {
    var latlng = new google.maps.LatLng( $marker.attr( 'data-lat' ), $marker.attr( 'data-lng' ) );

    // create marker
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
    });

    // add to array
    map.markers.push( marker );

    // if marker contains HTML, add it to an infoWindow
    if ( $marker.html() ) {

			// find span of certain class
      var span = $( $marker.find( '.' + $marker.attr( 'data-stuff' ) )[0] );
			// and hide it
      span.css( 'display', 'none' );

      // create info window
      var infowindow = new google.maps.InfoWindow({
        content: $marker.html()
      });

      // show info window when marker is clicked
      google.maps.event.addListener( marker, 'click', function() {
        infowindow.open( map, marker );
      });
    }
  }

  function center_map( map ) {
		// tip: everything ok in this function ;-)
    if ( map.markers.length > 0 ) {
      // vars
      var bounds = new google.maps.LatLngBounds();

      // loop through all markers and create bounds
      $.each( map.markers, function( i, marker ) {

        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

        bounds.extend( latlng );

      });

      // only 1 marker?
      if ( map.markers.length == 1 ) {
        // set center of map
        map.setCenter (bounds.getCenter() );
        map.setZoom (16 );
      } else {
        // fit to bounds
        map.fitBounds( bounds );
      }
    }
  }


  $( document ).ready( function() {

    var txtEl = '.example-4-txt';
    $( txtEl ).empty();

    var
      $markers = $( 'body' ).find( '.marker' ),
      myLatLng = new google.maps.LatLng( 50.2206000, 18.6748600 ),
      myOptions = {
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      },
      map = new google.maps.Map( $( '.gmaps' )[0], myOptions );

    map.markers = [];
    $markers.each( function() {
      add_marker( $( this ),...