JSFiddle - React, Tailwind, and code Playground

by kappa

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<div id="map"></div>

CSS

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

JavaScript

"use strict";

var Item = function (title, content, cartographer, position) {
    var self = this;

    self.clicked = function () {
        alert("Correct function called.");
        return false;
    };

    self.marker = new google.maps.Marker({
        map: cartographer.map,
        position: position,
        title: title
    });

    self.showInfo = function () {
        var contentText = document.createTextNode(content);
        var contentElement = document.createElement("a");
        contentElement.appendChild(contentText);
        contentElement.onclick = self.clicked;
        contentElement.setAttribute("href", "");
        cartographer.info.setContent(contentElement);
        cartographer.info.open(cartographer.map, self.marker);
    };

    google.maps.event.addListener(self.marker, "click", self.showInfo);
};

var Cartographer = function (center) {
    var self = this;

    self.map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 5
    });

    self.info = new google.maps.InfoWindow();
};

var clicked = function () {
    alert("Wrong function called.");
};

$(document).ready(function () {
    var cartographer = new Cartographer();
    var firstItem = new Item("One", "First item", cartographer, new google.maps.LatLng(1, 1));
    var secondItem = new Item("Two", "Second item", cartographer, new google.maps.LatLng(2, 2));
});