JSFiddle - React, Tailwind, and code Playground

by nhuon

HTML

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

CSS

#map-canvas {
    width: 600px;
    height: 600px;
}

JavaScript

function Map(element_id, options) {
    this.options = options;
    this.gmap = new google.maps.Map(document.getElementById(element_id), options.gmap_options);
    this.ginfowindow = new google.maps.InfoWindow();
}
Map.prototype.addMarker = function (lat, lng, title) {
    var self = this;
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: this.gmap,
        title: title
    });

    google.maps.event.addListener(marker, 'click', function () {
        self.onMarkerClick(marker);
    });
}
Map.prototype.onMarkerClick = function (marker) {
    if (this.options.use_infowindow) {
        this.ginfowindow.close();
        this.ginfowindow.setContent(this.options.infowindow_content);
        this.ginfowindow.open(this.gmap, marker);
    }
}

//---------------------------------------------------------------------------------------

var map_options = {
    use_infowindow: true,
    infowindow_content: '<div>Marker1</div>',
    gmap_options: {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
};

var map = new Map('map-canvas', map_options);
map.addMarker(-34.397, 150.644, 'Marker1');
map.addMarker(-33.397, 150.644, 'Marker2');