JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div>
    <ul>
        <li>ADD<span>library</span></li>
        <li>REMOVE<span>library</span></li>
    </ul>
</div>
<div>
    <ul>
        <li>ADD<span>doctor</span></li>
        <li>REMOVE<span>doctor</span></li>
    </ul>
</div>
<!-- Do not take these br's seriously, please... -->
<br /><br /><br />
<div id="map-canvas"></div>

CSS

ul li
{
    float:left;
    list-style:none;
    background-color: rgba(158,171,68,1);
    margin-right:5px;
    padding: 10px;
    font-weight:700;
}
ul li:hover
{
    background-color: rgba(158,171,68,0.7);
    cursor:pointer;
}
#map-canvas
{
    width: 400px;
    height:300px;
    background-color: #aaa;
}
ul li span
{
    display:none;
}

JavaScript

var markers = [];
var newMarkers = [];
//DATA FOR A COUPLE OF MARKERS
var markerData = {doctors: [
        {
            latitude: "51.0193880172327",
            longitude: "3.7640569885589"
        },
        {
            latitude: "51.0506397287192",
            longitude: "3.65842334511012"
        }
    
    ],
    libraries:[
        {
            latitude: "51.0383461467311",
            longitude: "3.74448138924053"
        },
        {
            latitude: "51.0776810489213",
            longitude: "3.67712955023802"
        }
    ]
};

//INITIALISE GOOGLE MAPS
var mapOptions = {
    center: new google.maps.LatLng(51.051754, 3.732605),
    zoom: 11,
    disableDefaultUI:true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

//ADD CLICK EVENTS TO THE MARKERS
$('ul li').click(function(){
    
    var category = $(this).children('span').html();
    var $this = $(this);
    $this.children('span').remove();
    var keyword = $this.html();
    
    if(keyword == "ADD")
    {
        addMarkers(category);
    }
    else if(keyword == "REMOVE")
        removeMarkers(category);
});
function addMarkers(category)
{
    if(category == "doctor")
    {
        alert('qsd');
        markers = markerData.doctors;
    }
    else if(category == "library")
    {
        markers = markerData.libraries;
    }
    for(i in markers){
				var marker = new google.maps.Marker({
					map: map,
					draggable: false,
					position: new google.maps.LatLng(markers[i].latitude, markers[i].longitude),
					visible: true,
					data: category
                });
        newMarkers.push(marker);
    }
    
}
function removeMarkers(category)
{
    var length = newMarkers.length
    var count = 0;
    
    for(i in newMarkers) {
		if(newMarkers[i]['data'] == category){
            count ++ 
			newMarkers[i].setMap(null);	
			newMarkers.splice(i, 1);
		}
    }
    
    alert('Number of markers in...