JSFiddle - React, Tailwind, and code Playground
by Ivin Raj S
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Map</title>
<style>
#map_canvas {
width:100%;
height:500px;
}
</style>
</head>
<body>
<div id="map_canvas" class="tg-location-map tg-haslayout"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAV8AiebjdcoS-Ratewz-HDkFt7XCq3zOM&libraries=places&callback=initMap"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script type="text/javascript">
var gmarkers = [];
var markers = [
{
"title": 'IVIN ',
"lat": '8.088306',
"lng": '77.538451',
"description": 'Basically am a Heart Specialist Doctor',
"type": 'D'
}
,
{
"title": 'Ratheesh ',
"lat": '18.520430',
"lng": '73.856744',
"description": 'Basically am a Neuro Surgeon Doctor',
"type": 'P'
}
,
{
"title": 'John Doe ',
"lat": '28.704059',
"lng": '77.102490',
"description": 'Basically am a Neuro Surgeon Doctor',
"type": 'H'
}
,
{
"title": 'Doe ',
"lat": '9.925201',
"lng": '78.119775',
"description": 'Basically am a Neuro Surgeon...