How to integrate google map(ng-map) into virtoCommerce?

[eddy0223]

Hello,

What is the best way to integrate google map(ng-map) into virtoCommerce?

We are customizing the virtoCommerce for one of our clients. He would like to have a google map to be integrated into one of the modules.

I tried to to use 'ng-map'(ng-map or github) , but I soon as I use it(as they suggested) the given module does not load any more into the module menu(As if it does not know how to resolve the newly integrated ng-map). Below is an example.

var app = angular.module('module name', ['ngMap']); app.controller('controller name', function (NgMap) { var map; var vm = this; NgMap.getMap().then(function (evtMap) { map = evtMap; }); vm.latlng = [45.459786, -73.724240]; vm.radius = 3500; vm.getRadius = function (event) { alert('this circle has radius ' + this.getRadius()); } vm.setCenter = function (event) { console.log('event', event); map.setCenter(event.latLng); } vm.foo = function (event, arg1, arg2) { alert('this is at ' + this.getPosition()); alert(arg1 + arg2); } vm.dragStart = function (event) { console.log("drag started"); } vm.drag = function (event) { console.log("dragging"); } vm.dragEnd = function (event) { console.log("drag ended"); } });

IMPORTANT Please let me point out that the code above works perfectly in a non virtoCommerce application. Already tested it.

Thank you for you advice

Ailiam A.

[eMazeika]

Hi, is there any error in browser developer console? Usually if a module fails to load, the whole menu is missing too. Any related screenshot or code could help.

[eddy0223]

Yes the error that keeps coming says enable to load platform.web due: 'ngMap'. missing module or module has been misspelled. We doubled check and it loaded the module correctly as well as all the modules and we still don't understand why it doesn't see it.

For the code: filed needed: ngMap.js; already installed and referenced.

var app = angular.module('module name', ['ngMap']); app.controller('controller name', function (NgMap) { var map; var vm = this; NgMap.getMap().then(function (evtMap) { map = evtMap; }); vm.latlng = [45.459786, -73.724240]; vm.radius = 3500; vm.getRadius = function (event) { alert('this circle has radius ' + this.getRadius()); } vm.setCenter = function (event) { console.log('event', event); map.setCenter(event.latLng); } vm.foo = function (event, arg1, arg2) { alert('this is at ' + this.getPosition()); alert(arg1 + arg2); } vm.dragStart = function (event) { console.log("drag started"); } vm.drag = function (event) { console.log("dragging"); } vm.dragEnd = function (event) { console.log("drag ended"); } });

[eMazeika]

ok, it sould be due to the sequence the js files are loaded. If you add 'ngMap' as dependency in module and that module is resolved before ngMap.js is loaded, the error is unavoidable. How do you reference ngMap.js? Are you using bower/gulp for that? What's the folder structure in your module?

[eddy0223]

First I downloaded ngMap.js with bower as suggested by the author See information below: source ng-map

**For Bower users, $ bower install ngmap Include ng-map.min.js: Include Google maps:

Name your angular app ngMap, or add it as a dependency var myApp = angular.module('myApp', ['ngMap']); To get the map instance use the NgMap.getMap() function app.controller('MyController', function(NgMap) { NgMap.getMap().then(function(map) { console.log(map.getCenter()); console.log('markers', map.markers); console.log('shapes', map.shapes); });** });

II - What's the folder structure in your module? I made a copy of the folder ngmap created with bower to my module that is supposed to display the map. Example: Structure 1 - virtoCommerce.MyModuleName.Web/ blades/ scripts (also include the remaining htmls and javascripts)/ ngMap.js, ngMap.debug.js and ngMap.min.js(Needed for the map to work)

     Like most of my modules, virtoCommerce.MyModuleName.Web and virtoCommerce.MyModuleName.data are loaded when virtoCommerce.platform is called during execution. 

I hope that helps

Thank you in advance

[eMazeika]

restructure like this: virtoCommerce.MyModuleName.Web/

• Scripts/

  -- ngMap.min.js -- blades/ --- include myModule.js and other your htmls and javascripts here

[eddy0223]

Hello again,

Ok I have followed your suggestion and I am still getting the same error message. The entire application failed to load. below the error message description:

Uncaught Error: [$injector:modulerr] Failed to instantiate module platformWebApp due to: Error: [$injector:modulerr] Failed to instantiate module virtoCommerce.ModuleName due to: Error: [$injector:modulerr] Failed to instantiate module ngMap due to: Error: [$injector:nomod] Module 'ngMap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.4.4/$injector/nomod?p0=ngMap at http://localhost:xxxx /Scripts/allPackages.js:14:11697 at http://localhost: xxxx /Scripts/allPackages.js:14:21195 at t (http://localhost: xxxx /Scripts/allPackages.js:14:20668) at http://localhost: xxxx /Scripts/allPackages.js:14:20980 at http://localhost: xxxx /Scripts/allPackages.js:14:29728 at o (http://localhost: xxxx /Scripts/allPackages.js:14:12104) at f (http://localhost: xxxx /Scripts/allPackages.js:14:29576) at http://localhost: xxxx /Scripts/allPackages.js:14:29745 at o (http://localhost: xxxx /Scripts/allPackages.js:14:12104) at f (http://localhost: xxxx /Scripts/allPackages.js:14:29576)

II - JavaScript code

var app = angular.module('virtoCommerce.moduleName', ['ngMap']); app.controller('virtoCommerce.moduleName.displayRouteMapDetailController', function (NgMap) { var map; var vm = this; NgMap.getMap().then(function (evtMap) { map = evtMap; }); vm.latlng = [45.459786, -73.724240]; vm.latlng = "1985 55th Avenue, New York; vm.radius = 3500; vm.getRadius = function (event) { alert('this circle has radius ' + this.getRadius()); } vm.setCenter = function (event) { console.log('event', event); map.setCenter(event.latLng); } vm.foo = function (event, arg1, arg2) { alert('this is at ' + this.getPosition()); alert(arg1 + arg2); } vm.dragStart = function (event) { console.log("drag started"); } vm.drag = function (event) { console.log("dragging"); } vm.dragEnd = function (event) { console.log("drag ended"); } });

Please advice

Thank you in advance

[eMazeika]

can you email your project to em@virtoway.com for further analysis?

[eddy0223]

I don't think my manager will approve the idea of me emailing an ongoing project for one of our customers. But what I can do I can try to recreate the project under a dummy name and information send that to you. Is it going to work ?

Thank you

[eMazeika]

sure, that's ok with me

[eddy0223]

I will try do it before the end of today.. I don't know if your time zone is eastern or central or pacific

[eMazeika]

i'm on the eastern zone. Eastern European ) Waiting for your project.

[eddy0223]

I am trying to upload the project to a OneDrive because it is at least 1.00 GB. Once I am done I will email you the link to download it; and I will tell you exactly where to go

Thank you for your help

[eMazeika]

@eddy0223, welcome to Angular! There was no need to upload the whore solution, excerpts from the project would be enough.

1. change angular.module(moduleName, []) to angular.module(moduleName, ['ngMap']) in the project;
2. change var app = angular.module('virtoCommerce.customerModule', ['ngMap']); to app = angular.module('virtoCommerce.customerModule');
3. delete files ng-map.debug.js and ng-map.js;

Imho, that should be enough to get the app loading again. I'd also strongly recommend:

• create separate project for your task: http://docs.virtocommerce.com/display/vc2devguide/Creating+new+module
• migrate from platform v2.10 to the latest version

[eddy0223]

eMazeika,

you said

1. change angular.module(moduleName, []) to angular.module(moduleName, ['ngMap']) in the project;
2. change var app = angular.module('virtoCommerce.customerModule', ['ngMap']); to app = angular.module('virtoCommerce.customerModule');

I am kind of confused which one should I use the first one or the second one ?

Thank you

[eMazeika]

use both: 1st one defines the module and its references. Second gets reference to the module without redefining it

[eddy0223]

Please correct me if I am wrong if I follow your instructions the code should like the code below, right? even with that I still get the same error message

Uncaught Error: [$injector:modulerr] Failed to instantiate module platformWebApp due to: Error: [$injector:modulerr] Failed to instantiate module virtoCommerce.customerModule due to: Error: [$injector:modulerr] Failed to instantiate module ngMap due to: Error: [$injector:nomod] Module 'ngMap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

CODE

angular.module('virtoCommerce.customerModule', ['ngMap']); app = angular.module('virtoCommerce.customerModule'); app.controller('virtoCommerce.customerModule.displayRouteMapDetailController', function (NgMap) { var map; var vm = this; NgMap.getMap().then(function (evtMap) { map = evtMap; }); vm.latlng = [45.459786, -73.724240]; vm.latlng = "1985 55th Avenue, Dorval, Québec H9P 1G9"; vm.radius = 3500; vm.getRadius = function (event) { alert('this circle has radius ' + this.getRadius()); } vm.setCenter = function (event) { console.log('event', event); map.setCenter(event.latLng); } vm.foo = function (event, arg1, arg2) { alert('this is at ' + this.getPosition()); alert(arg1 + arg2); } vm.dragStart = function (event) { console.log("drag started"); } vm.drag = function (event) { console.log("dragging"); } vm.dragEnd = function (event) { console.log("drag ended"); } });

[eMazeika]

customer.js: //Call this to register our module to main application var moduleName = "virtoCommerce.customerModule";

if (AppDependencies != undefined) { AppDependencies.push(moduleName); } angular.module(moduleName, ['ngMap'])

displayRouteMap.js: var app = angular.module('virtoCommerce.customerModule');

[eddy0223]

I made all the changes as you suggested but I still have the same error:

Look for yourself: //Call this to register our module to main application var moduleName = "virtoCommerce.customerModule";

if (AppDependencies != undefined) { AppDependencies.push(moduleName); }

angular.module(moduleName, ['ngMap']) .config( ['$stateProvider', function ($stateProvider) { $stateProvider .state('workspace.customerModule', { url: '/customer', templateUrl: '$(Platform)/Scripts/common/templates/home.tpl.html', controller: [ '$scope', 'platformWebApp.bladeNavigationService', function ($scope, bladeNavigationService) { var blade = { id: 'new-customer', title: 'customer.main-blade-title', breadcrumbs: [], subtitle: 'customer.main-blade-subtitle', controller: 'virtoCommerce.customerModule.customerMainController', template: 'Modules/$(VirtoCommerce.Customer)/Scripts/blades/customer-main.tpl.html', isClosingDisabled: true }; bladeNavigationService.showBlade(blade); $scope.moduleName = 'vc-customermain'; } ] }); }] )

Thank you for your help I see that you already closed the ticket;

[eMazeika]

we don't provide support for coding in general. I consider your issue as angularJS specific. Check if ngmap.min.js is included in your resulting html; create separate project to better mimic the situation. Good luck!