JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="map-search"><form name="map-search" action="#" onsubmit="return post_2612_map.zoomToLocation();"><input id="post_2612_map_address" type="textbox" placeholder="Enter a Location"><input type="submit" value="Search" onclick="return post_2612_map.zoomToLocation();"></form></div> <div class="map-filter"><form id="post_2612_map_filter" name="map-filter" action="#"><label>Business <input type="checkbox" name="Business_filter" value="Business" checked="checked" onchange="post_2612_map.changed();"/></label> <label>Skate <input type="checkbox" name="Skate_filter" value="Skate" checked="checked" onchange="post_2612_map.changed();"/></label> <label>Uncategorized <input type="checkbox" name="Uncategorized_filter" value="Uncategorized" checked="checked" onchange="post_2612_map.changed();"/></label> </form></div><div id="post_2612_map_wrapper" class="map-wrapper"><div id="post_2612_map" style="width:100%;height:400px;"></div></div>

JavaScript

var post_2612_options = {
    center: new google.maps.LatLng(39.83,-98.00),
    zoom: 3,
    minZoom: null,
    maxZoom: null,
    zoomControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    panControl: false,
    draggable: true,
    scrollwheel: true,
    streetViewControl: false
};
var post_2612_locations = [
    ['SPOT','Tampa, FL',27.9505750,-82.4571776,'http://wpmaps.dev/?p=122',['Business','Skate']],
    ['Home','Montgomery, AL 36104',32.3558320,-86.3021739,'http://wpmaps.dev/?p=60',['Uncategorized']],
    ['Google','San Francisco, CA',37.7749295,-122.4194155,'http://wpmaps.dev/?p=23',['Business']],
    ['NYC','NYC',40.7143528,-74.0059731,'http://wpmaps.dev/?p=5',['Uncategorized']]
];
jQuery(document).ready(function() {
    var post_2612_map = new WP_Map("post_2612_map", post_2612_locations, post_2612_options);
    post_2612_map.initialize();
});

function WP_Map(elementId, locations, options) {
  var map;
  this.markers = [];
  var infowindow = new google.maps.InfoWindow();
  
  this.addMarker = function(locationName, locationAddress, locationLat, locationLng, locationLink, locationCategories) {
    var locationLatLng = new google.maps.LatLng(locationLat, locationLng);
    var marker = new google.maps.Marker({
        map: map, 
        position: locationLatLng,
        title: locationName
    });
    marker.categories = locationCategories;
    google.maps.event.addListener(marker, 'click', function() {
      var contentString = '<div class=\"marker-info\"><h1 class=\"entry-title\"><a href=\"'+locationLink+'\" title=\"Permalink to '+locationName+'\" rel=\"bookmark\">'+locationName+'</a></h1><span class=\"address\">'+locationAddress+'</span><br><span class="categories">'+locationCategories.join(', ')+'</span></div>';
      infowindow.setContent(contentString);
      infowindow.categories = locationCategories;
      infowindow.open(map,marker);
      marker.setZIndex(99999);
    });
    this.markers.push(marker);
  }

 ...