JSFiddle - React, Tailwind, and code Playground

by mgrcic

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>
<div id="map" style="width:100%;height:512px;" data-bind="mapsGoog: { config: config, marker: marker }"></div>

JavaScript

/*global $,console,google,ko,navigator*/
$(function() {

    "use strict";

    var map, randomizeLocation, RedmondWA;

    RedmondWA = {
        name: "Redmond, WA",
        lat: 47.676484,
        lng: -122.121792
    };
    randomizeLocation = function(location, s) {
        return {
            lat: location.lat + (Math.random() * s - s / 2),
            lng: location.lng + (Math.random() * s - s / 2)
        };
    };

    // Binding Handlers
    ko.bindingHandlers.mapsGoog = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            var config, map, marker, markers, same;
            markers = [];
            same = function(l1) {
                return function(l2) {
                    return l1.lat === l2.lat && l1.lng === l2.lng;
                };
            };
            config = valueAccessor().config;
            map = new google.maps.Map(element, {
                zoom: config.zoom || 1,
                center: new google.maps.LatLng(config.center.lat || 0, config.center.lng || 0),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            marker = valueAccessor().marker;
            marker.add.subscribe(function(loc) {
                // Iterate over the set of markers, if the location has a marker, set the marker's map
                var i, curr;
                curr = ko.utils.arrayFirst(markers, same(loc));
                if (curr) {
                    curr.marker.setMap(map);
                } else {
                    markers.push({
                        lat: loc.lat,
                        lng: loc.lng,
                        marker: new google.maps.Marker({
                            title: loc.name || "",
                            position: new google.maps.LatLng(loc.lat || 0.0, loc.lng || 0.0),
                            map: map,
                            draggable: false,
                            visible: true
                        })
                   ...