JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map-canvas"></div>
<div id="iframecarte" data-emplacements="[[45.5314817,-73.1835154], [45.570004,-73.448701], [45.6066487,-73.712409]]"></div>

CSS

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

JavaScript

function GoogleMapsInit() {
    setTimeout(function initialize() {
        var emplacements = $('#iframecarte').attr("data-emplacements");
        // Emplacements returns [[45.5314817,-73.1835154], [45.570004,-73.448701] ]
        var mapOptions = {
            zoom: 9,
            center: new google.maps.LatLng(45.5580421, -73.7303025)
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var locations = JSON.parse(emplacements);

        var marker, i;
        var markers = new Array();

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][0], locations[i][1]),
                map: map
            });

            markers.push(marker);

        }

    }, 500);
}
GoogleMapsInit();