Kendo UI Builder Sample using Google Maps

Here is a more complex sample integrating with Google Maps using Kendo UI Builder .

Video explaining the sample:

[View:https://www.youtube.com/watch?v=TYjGRrCcuXE:314:188]

HTML (can placed inside a CustomHTML component or in the TopSection.html file):

<style>
    #gmap {
      height: 400px;
    }
</style>
<div id="gmap"></div>
<script async defer src="maps.googleapis.com/.../js

onshow code for the controller.public.js (please change Google API keys to your own):

    onShow($scope) {
        console.log('Show');
        this.scope = $scope;
        $scope.vm.$window.initMap = function(initMap) {
            var mapProp = {center:new google.maps.LatLng(0,0), zoom:6, };
            this.empMap = new google.maps.Map(document.getElementById("gmap"),mapProp);
            angular.element('#employeeGrid').data("kendoGrid").select('tr[data-uid]:eq(0)');
        };
    }

onEmployeeChange code for the controller.public.js:

onEmployeeChange on controller.public.js for your view:
    onEmployeeChange($scope) {
		var dataGrid       	= this.$components.employeeGrid.widget;
		var selectedLine   	= dataGrid.select();
		var lineData       	= dataGrid.dataItem(selectedLine);
        var empAddress 		= lineData.Address + ", " + lineData.Address2 + ", " + lineData.City + ", " + lineData.State + ", " + lineData.PostalCode;
        if (typeof geocoder === 'undefined') {
            var geocoder = new google.maps.Geocoder();
        }
        geocoder.geocode( { "address": empAddress }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
                this.empMap.setCenter(results[0].geometry.location);                
                if (angular.isDefined(this.marker)) {
                    this.marker.setPosition(results[0].geometry.location);
                    this.empMap.panTo(results[0].geometry.location);
                }
                else {
                    this.marker = new google.maps.Marker({ map: this.empMap, position: results[0].geometry.location });
                }
            }
        });
    }
}

Hope it helps!

Ricardo Perdigao