JSFiddle - React, Tailwind, and code Playground

by hotbelgo

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://raw.github.com/nlaplante/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<div ng-app>
<div id="map" ng-controller="editorController">
<google-map center="map.center" zoom="map.zoom" draggable="true">
<marker coords='map.marker.pos' ></marker>
</google-map>
</div>
</div>

CSS

.angular-google-map-container { height: 300px; }

JavaScript

var app = angular.module('restosApp', ['google-maps']);

app.controller('editorController', function($scope, $http, restosFactory) {
    	$scope.map = {
	    center: {
	        latitude: 52.374304,
	        longitude: 4.898723
	    },
	    zoom: 12,
	    marker: {
	        latitude: 52.374304,
	        longitude: 4.898723,
	        icon: 'green.png'
	    }
	};
});