JSFiddle - React, Tailwind, and code Playground

by katalin_2003

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>

CSS

html,
  body,
  #map-canvas {
	height: 100%;
	margin: 0px;
	padding: 0px
  }

JavaScript

var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 14,
    center: {
      lng: 3.516,
      lat: 50.359
    }
  });


  map.data.setStyle(function(feature) {
    return {
      title: feature.getProperty('Libelle') || null,
      icon: (feature.getProperty('Libelle')) ?
        'https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|' + feature.getProperty('Libelle') + '|FFFFFF|000000' :
        'https://www.google.com/mapfiles/marker.png'
    };
  });


  map.data.addGeoJson({
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
          "Id": 0,
          "Num": 1,
          "Prop_loc": "P",
          "Num_1": 0,
          "Typ_Voie": "place d'",
          "Voie": "Armes",
          "Genre": "administratif",
          "Libelle": "Hôtel de Ville",
          "ID_perso": 5
        },
        "geometry": {
          "type": "Point",
          "coordinates": [3.524187293040136, 50.357783527375041]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "Id": 0,
          "Num": 2,
          "Prop_loc": "P",
          "Num_1": 0,
          "Typ_Voie": "rue de la",
          "Voie": "Bleue Nord",
          "Genre": "administratif",
          "Libelle": "Ateliers municipaux",
          "ID_perso": 6
        },
        "geometry": {
          "type": "Point",
          "coordinates": [3.543317038774088, 50.373202369577662]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "Id": 0,
          "Num": 3,
          "Prop_loc": "P",
          "Num_1": 1,
          "Typ_Voie": "rue des",
          "Voie": "Chartreux",
          "Genre": "administratif",
          "Libelle": "Police municipale",
          "ID_perso": 78
        },
        "geometry": {
          "type": "Point",
          "coordinates": [3.52736606516175, 50.358513675010045]
        }
      },
      {
        "type":...