Ionic 2 | An example of Google Map using Sebm angular2-google-map directive


Software Consultant

You may also like...

13 Responses

  1. Van says:

    Nice tutorial, BTW, how’s the performance? Does the map work smoothly? I haven’t played with Ionic 2 yet, still working on Angular2 and heading to Ionic 2 as well. Your tutorial would be a great help, thanks!

    • Vijay says:

      In general, I don’t see any performance issue.
      However when I type address and press enter, sometime during my testing , it took time to refresh map with new address.

      Thanks for your comment.

  2. Vijay says:

    I have updated my github source code with latest angular2-google-maps version.

  3. Florian says:

    This is exactly what I have been trying to do for the past 4 days – THanks so much for this post !

    However I am facing some issue with the very beginning of the project when trying to install angular2-google-maps – I have the following output :

    npm install angular2-google-maps –save
    ionic-hello-world@ /Users/$USER/Desktop/ionic/GoogleMapAndAutoComplete
    ├── UNMET PEER DEPENDENCY @angular/common@2.2.1
    ├── UNMET PEER DEPENDENCY @angular/core@2.2.1
    └── angular2-google-maps@0.17.0

    Is there any dependency ? For info I m building on a MAC if it matters…

    • Vijay says:

      I tested this on Windows 10.0 and not on MAC.
      npm warning/error output should be same for any O/S.

      You are getting this error because Ionic framework uses different version of @angular/common and @angular/core whereas angular2-google-maps depends on angular/common@2.2.1 and angular/core@2.2.1.

      I normally ignore these warnings if it works otherwise I run “npm update” command.

      Also use following command :-

      npm install angular2-google-maps –-save

      There should be double dashes in save.

      I will fix this in article.

  4. Eric Gould says:

    Thanks for this. I am having an issue where the map is there but the actually drawing of the streets is not. If I test in browser and switch between device emulation and not, it forces google to draw the map. I tested on the device, same issue. I am not showing the map in fullscreen it is inside an ion-grid. The map gets the google logo and the zoom controls. It is like it is missing repaint event.

    • Eric Gould says:

      Issue was the fact that the element was initially hidden. That doesn’t appear to play nice with the directive. Replaced with *ngIf, working now.

  5. Gera JC says:

    Hi Vijay, thank you for your valuable time first of all.

    My question is if with the new update, it is the same procedure that is described in this post, I mean the change mentioned in git: angular2-google-maps -> @ agm / core

    • Vijay says:

      It has been long time working on new version.
      I will have to check-in again and find whether it still works with latest version.
      If you have any update on this, please let me know.

Leave a Reply

%d bloggers like this: