JSFiddle - React, Tailwind, and code Playground

GMap3 testing.

by Lee Whitworth

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.jsdelivr.net/gmaps/0.4.24/gmaps.min.js"></script>
<div id="test" class="gmap" style="height:250px; margin-bottom: 30px;">
</div>

<div class="marker" data-lat="37.096" data-lng="-113.568" data-icon="https://eventida.com/images/e2_map_marker.png">
Location One
</div>

<div class="marker1" data-lat="37.096" data-lng="-113.568" data-icon="https://eventida.com/images/e2_map_marker.png">
Location Two
</div>

<div class="marker1" data-lat="37.096" data-lng="-113.568" data-icon="https://eventida.com/images/e2_map_marker.png">
Location Three
</div>

<div class="marker1" data-lat="40.096" data-lng="-100.568" data-icon="https://eventida.com/images/e2_map_marker.png">
Location Four
</div>

<div class="marker1" data-lat="40.096" data-lng="-100.568" data-icon="https://eventida.com/images/e2_map_marker.png">
Location Five
</div>

<div class="marker1" data-lat="40.096" data-lng="-100.568" data-icon="https://eventida.com/images/e2_map_marker.png">
Location Six
</div>

<div id="modal_map" style="height: 275px; width: auto;"></div>

JavaScript

$(document).ready(function() {

var map = new GMaps({
  div: '#test',
  lat: 37.096,
  lng: -113.568,
  zoom: 4
});

var marker_html = $(.marker).html;

map.addMarker({
  lat: -12.043333,
  lng: -77.028333,
  title: 'Lima',
  //click: function(e) {
    //alert('You clicked in this marker');
  //},
  	infoWindow: {
  	content: marker_html
	}
});

});