Google Map + Coconut

gmap.hx

class Map extends View<{workers:WorkersData}> {
	
	var map:GoogleMap;
	var markers:Array<GoogleMapMarker> = [];
	var locations:List<Location>;
	
	function render() {
		// "extract" the location and store in class variable
		// this also cause render() to run again when the `locations` are updated
		this.locations = workers.locations;
		return @hxx '
			<div class="full-height"/>
		';
	}
	
	override function afterInit(e) {
		// init the map here
		map = new GoogleMap(e, {
			center: {lat: 22.4254815, lng: 114.212813},
			zoom: 15,
		});
		
		updateMarkers(true);
	}
	
	override function afterPatching(e) {
		updateMarkers();
	}
	
	function updateMarkers(fit = false) {
		// details of this function is not important, 
		// basically it just update the markers with the location data
		var i = 0;
		var bounds = new GoogleMapLatLngBounds();
		for(location in locations) {
			var marker = markers[i++];
			var pos = {lat: location.latitude, lng: location.longitude};
			bounds.extend(pos);
			if(marker == null) {
				markers.push(new GoogleMapMarker({
					position: pos,
					map: map,
				}));
			} else {
				marker.setPosition(pos);
			}
		}
		while(markers.length > i) markers.pop().setMap(null);
		if(fit) map.fitBounds(bounds);
	}
}

@:native('google.maps.Map')
private extern class GoogleMap {
	function new(e:Element, options:{});
	function fitBounds(bounds:GoogleMapLatLngBounds):Void;
}
@:native('google.maps.Marker')
private extern class GoogleMapMarker {
	function new(options:{});
	function setPosition(pos:{}):Void;
	function setMap(map:GoogleMap):Void;
}
@:native('google.maps.LatLngBounds')
private extern class GoogleMapLatLngBounds {
	function new();
	function extend(pos:{}):Void;
}