AngularJS Routing for Google Maps

Question

Im having trouble getting my second view to show up in my app. What the app is supposed to do is list locations, when you click on a location it is supposed to route to a different view with a Google Map embedded and search the coordinates at the location. Ive set up a plunker for my project. I believe my problem is somewhere in defining my controllers/modules. I would post my code in here but there are multiple classes which can get confusing. Can anyone help?

Demo: http://plnkr.co/edit/OZZRgiEcrLzreW3lrc5v?p=preview

You have a lot of issues on the plunker. I suggest you setup a new one, put all the js into one file and don't create multiple modules until you get the pieces down. Also, forget the google map until you understand how to setup the angular app and some simple routing. Then post a question. — lucuma
– lucuma, Commented Jul 18, 2014 at 17:16

RdN · Accepted Answer · 2014-07-18 17:37:45Z

1

This should help you further : http://plnkr.co/edit/IEj0HAolgmUVrCghMtgN

Amongst other things, your routing configuration is incorrect

    $routeProvider
      .when("/index", {
        templateUrl:"index.html", 
        controller: "firstCtrl"})
      .when("/map", {
        templateurl:"map.html",
        controller: "MapController"})
      .otherwise("/index");

This sets your default view, which is put into the <div ng-view>, to the index.html, which contains the <div ng-view>. Something like an infinite loop.

I've split the views in two : a search.html and a map.html and updated the routing to look like this :

$routeProvider
      .when("/search", {
        templateUrl: "search.html",
        controller: "searchController"
      })
      .when("/map/:locationName", {
        templateUrl: "map.html",
        controller: "mapController"
      })
      .otherwise({
        redirectTo: '/search'
      });

Also, your map-data wasn't sent to the mapController. See the plunkr for the solution. The only thing you need to do now is to send the location instead of the name.

I've cleaned up your code a little and provided some info on how the routing works and how to improve your module definitions.

This was very helpful for me when I started working with AngularJS. It might help you too : https://docs.angularjs.org/tutorial/

answered Jul 18, 2014 at 17:37

RdN

3,2831 gold badge19 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ian Pennebaker Over a year ago

Thanks a bunch. This helped a lot. I have one more question though. Do you know why the map doesn't load up now?

RdN Over a year ago

I'm sure you can find out with some debugging :) Good luck.

Collectives™ on Stack Overflow

AngularJS Routing for Google Maps

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related