Google Maps Banner

Implement Google Maps Using Ionic Framework

One of my Twitter followers recently asked me if I could write an article regarding Google Maps and Ionic Framework.  I am always up to learning and sharing things, so I’ve taken on this challenge.

The following will get you a fresh Ionic project with geolocation and a fancy Google Map.

Like with most of my Ionic tutorials, let’s start by creating a new project with the iOS and Android platforms added:

Remember, if you’re not on a Mac, you cannot build for iOS.

Since we are using maps, it is probably a good idea to add geolocation functionality to your application.  You can add the Apache Cordova Geolocation API by running the following command:

We are going to be using the Google Maps JavaScript SDK, which requires us to have an API key for use in our application.  Go into your Google API Console and register a new Google Maps application.

When you have your key, crack open your www/index.html file because we need to add the JavaScript library to our project.

Please note that the Google Maps JavaScript library cannot be downloaded, so there will always be a small delay during the initial setup when you launch your application.

Now that the SDK is included we need to add some custom CSS for displaying it on the screen.  Open your www/css/style.css file and add the following code:

Next we get to start doing the fun stuff.  Open your www/app.js file because we want to add a controller that handles the Google Map.

The above code will register the map to a DOM element with a map id.  It will center the map in Merced, California and then attempt to center the map around your current location.  If it finds your current location it will place a marker.

We are not quite done yet.  We need to add some code to our www/index.html file for containing the map.

Now, the depth of Google Maps can go far beyond the simplistic nature I demonstrated in my article.  Have some fun with the official API docs and use Google Maps to its full power.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Srini

    Hi Nic,

    I have tried the above and map is not displaying in Chrome browser. I have enabled required Google map services and using valid key. Any suggestions?

    Regards,
    Srini

    • Hi Srini,

      What does the Google Chrome console tell you as far as JavaScript errors?

      Regards,

  • Srini

    Hi Nic,
    No errors, I have put some debug messages using console.log in the MapController to see if it reaches here. However I I can’t see any log messages as well, looks like code is not reaching or firing. May I know will this code will trigger when we navigate to this page?

    Regards,
    Srini

    • Hi Srini,

      If your debug logs are not firing it sounds like there are other problems. Even if the map fails to load it should still load your controller which I assume has all your console.log statements.

      Would you mind sharing your code on GitHub, CodePen, or PasteBin? I’d be happy to take a look. Just make sure to strip out your Google Maps API key.

      Regards,

  • Sumit

    Hey Bro, Have you tried using this plugin with ionic framework? https://github.com/wf9a5m75/phonegap-googlemaps-plugin

    This isn’t working for me at all. From the features it appears to be really nice. Please have a look and see if you can provide some support.

    • Hi Sumit,

      I wouldn’t use a plugin when it works perfectly fine with the JavaScript library.

      Unfortunately, I won’t be able to help you with this third party plugin for Google Maps. You may want to contact the developer.

      Regards,

      • Sumit

        Hi Nic,

        Thanks for the reply. I am trying your method now. I will contact you back if I face any issue.

        bests

        • Hi Sumit,

          Feel free to reach out for help if you run into problems.

          Regards,

  • SUMIT

    Hi Nic,

    I tried to run the maps your way and I could run it and created a blank app with maps working on it. But when I want an app to not show maps on the main page but some inner page e.g. accounts tab in tabs template of ionic it doesn’t work. Can you please comment on that?

    Regards

    • Hi Sumit,

      The Google Maps API will work as long as the DOM element is available to be updated.

      You may want to look at the logs of Chrome Inspector or Firebug. I’m betting you are trying to access a DOM element that doesn’t yet exist. If this is the situation, maybe put the controller on a particular tab rather than the full content scope.

      Let me know if this solves your problem.

      Regards,

    • SUMIT

      you can check my code here https://github.com/aerosum/tabsMap

      • Hi Sumit,

        Your code seems fine at first glance.

        Can you tell me what the logs say? Can you also validate that the controller is being accessed by placing some output in it?

        Thanks,

      • SUMIT

        Hi Nic. Could you have a look?

        • Hi Sumit,

          Please provide me with information regarding logs and output as mentioned in my last two comments to you. I cannot help you further until you provide this information.

          Regards,

  • SUMIT

    Hi Nic, Sorry Didn’t see your reply. Actually the logs give no errors. But I am not sure why the map is not showing up.
    I tried putting some logs and confirmed that the controller is surely getting called. But the control is not entering google.maps.event.addDomListener function. May be for the different states the dom listener has to be different.

  • SUMIT

    Hi Nic, So I think I got it working with a minor tweak. The controller looks like this now and it appears to be working.


    .controller('AccountCtrl', function($scope, $ionicLoading) {
    console.log("AccountCtrl");
    $scope.initialise = function() {
    console.log("In Google.maps.event.addDomListener");
    var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
    var mapOptions = {
    center: myLatlng,
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    });

    • Hi Sumit,

      That is very weird because you really aren’t doing much different. I don’t believe I have an explanation for that.

      Whatever works I guess 🙂

      • SUMIT

        Truly, there isn’t anything much different only shuffle of couple of lines.

        One thing that could be a causing this is that addDomListener you are using window and I am using the div of the map. Window being the parent page would have sent the event before we actually reach the map view. Thus it may keep waiting for the event which would not be sent again. I used it on div which will be loaded only when that view is initiated and thus is works.

        • Hi Sumit,

          I’m glad you got Google Maps working now with Ionic Framework!

          Let me know if I can help you with anything else 🙂

          Regards,

          • Murali

            Google map loaded at once, then i went back and came to same page, map is not getting loaded.

  • Maxime Bernard

    Just so you know, I followed your implementation and got the exact same problem: no error in console, no map loading. But I know my controller is being used since my title bar displays correctly (I mean “$scope.pagetitle = ‘Maps’; ” display ok in my page).

    But might be the fact that I did not use API Key?

    • Hi Maxime,

      You will need an API key from Google in order to use Google Maps.

      Let me know if adding an API key corrects your problem.

      Regards,

      • Maxime Bernard

        So I used this codepen (http://codepen.io/ionic/pen/uzngt) instead which looks like much of what you’re doing. They did not call “initialize” function in their code so I added it at the end of my controller and everything is working great. Thanks for the help.

        • Hi Maxime,

          Thanks for sharing this. I am going to re-review my article (make a video) and examine what you shared.

          Cheers,

  • Srini

    Hi Nic,
    Sorry could not get back to you on time, I have used http://codepen.io/mhartington/pen/bwdoA and it’s working fine, except iOS app crashes at login and when I reopen it works fine. No issues in Andriod. I think it’s taking bit more time to open in iOS than Andriod one.

    Any suggestions ???

    Thank u for your prompt responses.

    Regards,
    Srini

    • Hi Srini,

      I just attached a video tutorial to this article. Using the steps I demonstrated, I was able to get it working perfectly in both Android and iOS.

      Regards,

      • where is the video link

        • It is on YouTube. I embedded it in this post at the bottom for convenience. Turn off any blockers if you cannot see it.

          Best,

  • Todd

    Have you tried to use the Google Maps directive in an Ionic app? The html to create a map and place a marker looks something like this:

    where the controller might look something like this:

    .controller(‘MapCtrl’, [‘$scope’, function($scope) {
    $scope.map = {
    center: {
    latitude: 30,
    longitude: -75
    },
    zoom: 8,
    pan: true
    };
    $scope.marker = {
    coords: {
    latitude: 31,
    longitude: -74
    }
    }
    }])

    There is a nice tutorial by Jeremy Stover: AngularJs Angular-Google-Maps Directive Tutorial

    He doesn’t address Ionic and what might be different in the code if anything. So far my attempts are not working. It also requires lodash.js, bluebird.js, as well as the main angular-google-maps.js.

    This seems like the way to go, since it makes the code so simple and readable. It would be great if someone smarter than I am could demo an Ionic example.

    • Hi Todd,

      Angular Google Maps is definitely an option for using Google Maps in an Ionic Framework application. The way I demonstrated is just one of many.

      I will see about doing an Angular Google Maps tutorial in the near future 🙂

      Markdown language should work fine for displaying HTML on my blog.

    • RuRu

      Made Google Maps work with angular, and its a lot more simpler. I have tired Nics way, and it doesn’t want to work for some reason 🙁

      But the the question is, what is the best way to implement google maps? What I mean is, what loads faster, gives better performance and so on. There must be some trade off for using one approach to another.

  • Todd

    Sorry, I don’t know how to do this. So without the bracket characters the html looks like this:

  • OscarDeveloper

    Hi Nic

    Thanx for your tut, it helps me a lot! But actually I doesn’t work when ionic tabs are implemented (it means ngRoute is added), why? because it’s instantiated using:
    ” google.maps.event.addDomListener(window,’load’,function(){ ”
    obviously it will load your map once, but when you navigate it will not display the map again. When you’re using tabs the only thing you need to do is remove that line and its correponding ” }); “

    • Yas

      Thanks a lot

      • Boogie Das

        thanks a lot oscar that’s was some thought

    • Matias Tucci

      I was fighting with that same problem, thanks!

    • Felipe Marinho

      I get it working with tabs in the browser (i mean using ionic serve), but in the IOS simulator the map doesn’t show up. Any idea ?

    • Giann Godoy

      Hi Oscar, i am brazilian and already it had long sought a solution to the problem , helped thanks!

  • Naresh Naresh

    Hi Nic,

    Similar to the post by “OscarDeveloper”, I’m facing same rendering googleMap on a page, which activated by a button(ShowMap button) on the footer, navigated using router.

    On the Chrome brower(WITHOUT Android build), I do get googleMap on the page, whereas same code base when build for android ($ionic build android), and tested .apk on actual android phone, does NOT show googleMap

    (plz note, I did try with your code, which did not work, so I gave a try a try by replacing google.maps.event.addDomListener(window, ‘load’, function() { } with $scope.init (refered a post on StackOverFlow), which did not work as well….on the Android Phone device, page remains blank, may be is not loading init function)

    Being absolute new to Ionic and AngularJs,
    looking forward your expert help…

    My StackOverFlow link as follows:

    http://stackoverflow.com/questions/27664079/google-map-does-not-display-on-ionic-android-build-apk-using-cordova-works-fin

    Issue:

    Not able to display a google map on the page for an ionic android build app using cardova (WORKS FINE ON THE CHROME ie WITHOUT ANDROID BUILD)

    Page:

    Back

    Router:

    .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state(‘mapPage’,
    url: ‘/9’,
    templateUrl: ‘mapPage.html’,
    controller: ‘mapPageTabCtrl’
    })

    Controller:

    .controller(‘mapPageTabCtrl’, function($scope, $timeout, googleAppEngineService, $ionicPopup,
    controller_Provider, $ionicLoading, $compile) {

    $scope.init= function()
    {
    var propAddress = $scope.propInfoDetailsObj.prop_address;
    var geocoder = new google.maps.Geocoder();
    var result = “”;
    geocoder.geocode( { ‘address’: propAddress}, function(results, status)
    {
    if (status == google.maps.GeocoderStatus.OK)
    {
    var myLatlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng() );

    var mapOptions = {
    center: myLatlng,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById(“map”), mapOptions);

    var marker = new google.maps.Marker({
    map: map,
    position: myLatlng
    });

    google.maps.event.addListener(marker, ‘click’, function() {
    infowindow.open(map,marker);
    });

    $scope.map = map;
    }
    else
    {
    result = “Unable to find address: ” + status;
    console.log(“###” + result);
    }

    })//geocoder.geocode( { ‘ad
    };
    //});// function()
    })//controller(‘mapPageTabCtrl’,

    PRIOR to android build($ionic build android), tested it on the Chrome browser using tomcat and works fine. I could see google map on the page.

    Next,
    Using $ionic build android, created an apk file and tested both on AVD emulator and real android phone and notice that the page wont load google map, looks like its ignoring $scope.init= function(){}.

    Will appreciate your help…

    • What do the ADB logs say? What version of Android are you using?

      You’re building mobile apps, so I strongly recommend against testing in your browser.

      Please let me know.

      Regards,

      • Naresh Naresh

        Hi Nic,

        Thanks for your quick reply.

        While debug on the chrome browser(mobile app only, run under tomcat), it works fine and able to see the googleMap on the page, where routing works fine, resulting $scope.init function execution, which I debug line-by-line.

        On Android build(same code, no changes at all), with latest Android sdk 5.0.1(API 21) and also try with Android 4.42 (API 19), it did NOT show googleMap onto the page

        ADB logcat as follows: ( Not able to understand logs …too much work on main thread) Only difference than your code is that I display a google map on anotherpage activated from the footer-bar button, which opens a new page via routing….

        I/chromium( 1869): at compositeLinkFn (file:///android_asset/www/lib/ionic/j

        s/ionic.bundle.js:14890:13)

        I/chromium( 1869): at publicLinkFn (file:///android_asset/www/lib/ionic/js/i

        onic.bundle.js:14766:30)

        I/chromium( 1869): at self.appendViewElement (file:///android_asset/www/lib/

        ionic/js/ionic.bundle.js:47324:5)”, source: file:///android_asset/www/lib/ionic/

        js/ionic.bundle.js (19387)

        I/Choreographer( 1869): Skipped 37 frames! The application may be doing too muc

        h work on its main thread.

        • Again, I’d stop trying to use a web browser to test. You’re building mobile apps, not web apps. It is a very poor way to test.

          My next question is, did my tutorial work for you? Not a similar version, but the exact version. If my tutorial failed, we should start there, rather than in your custom code.

          I’m not familiar with the ADB error you posted. It could be the issue, but I’m not sure. If that error is related, it looks like you’re trying to process too much on the main thread. Mobile devices are nowhere near as powerful as computers.

          Let me know if my tutorial worked for you.

          Regards,

      • Naresh Naresh

        Hi Nic,

        Thanks for your quick reply.

        While debug on the chrome browser(mobile app only, run under tomcat), it works fine and able to see the googleMap on the page, where routing works fine, resulting $scope.init function execution, which I debug line-by-line.

        On Android build(same code, no changes at all), with latest Android sdk 5.0.1(API 21) and also try with Android 4.42 (API 19), it did NOT show googleMap onto the page

        ADB logcat as follows: ( Not able to understand logs …too much work on main thread) Only difference than your code is that I display a google map on anotherpage activated from the footer-bar button, which opens a new page via routing….

        I/chromium( 1869): at compositeLinkFn (file:///android_asset/www/lib/ionic/j

        s/ionic.bundle.js:14890:13)

        I/chromium( 1869): at publicLinkFn (file:///android_asset/www/lib/ionic/js/i

        onic.bundle.js:14766:30)

        I/chromium( 1869): at self.appendViewElement (file:///android_asset/www/lib/

        ionic/js/ionic.bundle.js:47324:5)”, source: file:///android_asset/www/lib/ionic/

        js/ionic.bundle.js (19387)

        I/Choreographer( 1869): Skipped 37 frames! The application may be doing too muc

        h work on its main thread.

  • Max

    Nic – when testing in the browser the google maps plugin appears to work as expected. However, as soon as I bring up the ios emulator I receive a warning stating “Google has disabled use of maps for this application. The provided key is not a valid Google API Key, or is not authorized for Google Maps Javascript API v3 on this site. …”. In the Google APIs Console I have Google Maps Javascript API v3 enabled and the referrer set to * (an asterisk) for my API key. Did you run into anything like this or set your referrer differently? Thanks.

  • multilexus

    Hello Nic,

    I was able to run your example as is, and it works perfectly fine (I use chrome for testing), however, when I try to separate the section that displays the map into a separate file “maps.html”, the page opens, but the map is not displayed.

    Basically, it works when I put the following code in the body of index.html just like you have it:

    But if I replace it with the following:

    and then put the actual map related code into a separate file maps.html like so:

    Then, the actual map does not get displayed. I tried to debug the code and I can see the my MapController is called, but the entire section that adds Dom Listener does not get executed.

    I’ve used that pattern many times and it works for all my other pages except the one with the map.

    Any suggestions?

    Thanks,
    Alex S.

  • seetha

    Thanks for the great explanations ,
    Iam a newbie to ionic and crossplatform app development, I have followed all the points as specified in this post, still seems a problem

    ReferenceError: google is not defined
    at new (file:///android_asset/www/js/app.js:22:5)
    at Object.invoke (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11994:17)

    Here is my app.js for refence

    // Ionic Starter App

    // angular.module is a global place for creating, registering and retrieving Angular modules
    // ‘starter’ is the name of this angular module example (also set in a attribute in index.html)
    // the 2nd parameter is an array of ‘requires’
    var app = angular.module(‘starter’, [‘ionic’])

    app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
    StatusBar.styleDefault();
    }
    });
    });
    app.controller(‘MapController’, function($scope, $ionicLoading) {

    google.maps.event.addDomListener(window, ‘load’, function() {
    var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

    var mapOptions = {
    center: myLatlng,
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById(“map”), mapOptions);

    navigator.geolocation.getCurrentPosition(function(pos) {
    map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
    var myLocation = new google.maps.Marker({
    position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
    map: map,
    title: “My Location”
    });
    });

    $scope.map = map;
    });

    });

    Can anyone help me to overcome this.

    • Can you put your project on GitHub? It is too complicated to read it without format in the comments of this blog. Either that or use pre and code tags.

      Regards,

      • seetha

        Thanks for your suggestions , i have used pre for formatting , can you please look on this now
        Thanks,
        Seetha

    • Did you include it properly in your index.html file?

      • seetha

        Yes am , can you please verify the above html head tag

        Thanks,
        Seetha

        • Everything seems to look ok. I would include the map js include before the end of your body tag rather than the head, but it shouldn’t make too much a difference. Next time I’m at my computer I’ll take a look and report back.

          Regards,

          • seetha

            Do you think the problem have any relation with
            Apache Cordova Geolocation API ?

            Yes as you specified the map js inclusion in the body tag wont change anything.
            Thanks a lot for you time,
            Seetha

          • seetha

            previous problem solved when i updated the ionic framework,
            Then i got

            Used SUMIT’s Controller as specified in the first comment

            log file for ref:

            but in log cat:

            I belive there is nothing to do with the code, do you know the reason behind this?
            Thanks,
            Seetha

          • I’m not familiar with that error, but it kind of sounds like you have the incorrect Android targets installed. If you’ve got the hard drive space, download everything from the SDK manager. That is what I tend to do.

            If that doesn’t solve the problem, you may want to post that in the forums.

            Regards,

          • seetha

            Thanks a alot Nic for you guidance and time.
            I did a new installation and everything working fine now ,
            Cheers,
            Seetha

  • seetha

    Hi Nic,
    Can you help me to add multiple markers in the below map controller, I have followed sumits controller.
    Thanks for the awesome resource,
    Seetha

  • Thiago Antonius

    Great tutorial.

    I’m having a problem with map conflict with modal.

    http://codepen.io/thiagoaos/pen/RNBJWE

    When i go with another page (page1), open a modal (login) and go back to map page, the map view broke (resize to a smaller sizer). If i don´t open a modal work fine, or if i open a modal in map page works fine too.

    can you help me?

    • That is very weird. Based on your CodePen, the map is in fact taking up the full screen still, but its just not rendering completely.

      I’m thinking it is a bug with the Google Maps JavaScript API. Can you confirm this same problem exists on a device or simulator?

      Regards,

      • Thiago Antonius

        In device happened too.

        I change ionic modal to a regular page and the error not happend. But, when i navigate so many times happened again.

        Ionic is resizing the map div in some time, i think.

        I fix this with the code below in init of the controller.

        if ( angular.isDefined( $scope.map ) ) {
        google.maps.event.trigger($scope.map, ‘resize’);
        }
        });

        but this feel ugly 🙁

        • A part of me still says this may be an issue with the JavaScript SDK. I mean the Google Map components stretch to fill the screen, just not the actual map data.

          Your hackish method may be the only way for now.

          Regards,

  • Edax Ucles

    Hi Nic, I implemented google maps in ionic app, when i run the app in the browser of pc everything works fine, but when i run i iOS emulator or run on android device doesn’t works, and I remove the map from app and I test again and the app works, what’s wrong?

    • What do your logs say?

      • Edax Ucles

        Well, when i run the app on iphone simulator, the log error says Error: Can’t find variable: google but in the browser of pc run without errors ..

        • You’re building mobile apps, not websites. With that said, you should assume the browser is always wrong. I never test in a browser for that reason.

          Please paste your full logs.

          Regards,

  • Yas

    Hi Nic,

    This is working great with Ionic Serve after removing the line :
    ‘google.maps.event.addDomListener(window, ‘load’, function()’

    However, when I tried it on Genymotion, it doesn’t work neither with this line nor after removing it.

    Thanks for your usual quick responses.

    Respect

    • Like I say in many of my comments and even a post I made on the topic. Do not test with ionic serve and do not test in a web browser. If you want a true experience, compile the app and install it on your device or simulator. ionic serve and live-reload are beta / alpha tools that are known to not work well.

      With that said, what are your logs?

      Regards,

      • Yas

        I used adb logcat as you advised to on one of your topics.
        I found out that I have used a wrong URL of google maps API:

        I had an old one : ‘maps.google.com…’ while the new one is ‘maps.googleapis.com…’

        Thanks a lot Nic.

        • So it works now?

          • Yas

            Yes It works 🙂

          • Awesome! Glad you got it working 🙂

      • Yas

        I used adb logcat as you advised to on one of your topics.

        I found out that I have used a wrong URL of google maps API:

        I had an old one : ‘maps . google . com…’ while the new one is ‘maps . googleapis . com…’

        Thanks a lot Nic.

  • Great tutorial, working ideally for me!

  • Qi Wang

    Hi Nic, thanks for the great article. I followed the every step in your article, and it works when I ran 1) ionic serve, and 2) ionic emulate iOS. But I got white screen when running app in either Genymotion or real Android device or ‘ionic emulate android’. Through Chrome DevTools, I saw the following error log:

    Failed to load resource: the server responded with a status of 404 (Not Found) http://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true

    I’ve scratched my head for hours for this issue. Could you pls give me some advices on this issue? Thanks a lot.

    • My assumption is that you have a configuration issue in your Google APIs dashboard. Make sure everything for the project has the correct settings.

      Regards,

      • Qi Wang

        Thank you very much Nic.

        I also got the help from Ionic’s team. The problem got solved by using their advice.

        Try adding this plugin:
        ionic plugin add cordova-plugin-whitelist
        otherwise http requests are blocked – as of the latest Cordova version.

        More info can be found at http://forum.ionicframework.com/t/failed-to-load-external-scripts-when-running-ionic-emulate-android-or-ionic-run-android/22171/3

        Thank you again!

        • Damn, I didn’t know the latest version of Apache Cordova caused drama. Thanks for sharing this so I can mention it to others having trouble.

          Thanks!

          • Benjamin Ray

            Thanks. This solved for me as well on iOS.

        • Will Silveira

          Thank you VERY much. Worked like a charm 🙂

  • Guru Prasad

    Hi Nic,

    Good tutorial. Worked for me on my laptop. However when I run the app on an AVD, it doesn’t detect my current location. The same issue even when I tested on an Android mobile. Can you please let me know if something special is to be done to get it working on a mobile device / AVD?

    ~Guru

    • What do your device logs say?

      • Guru Prasad

        Sorry, I am new to mobile development. Did you mean ADB logs?

        • Guru Prasad

          Let me know how I can share the log file with you.

          • Paste the logs in the comments of this thread.

          • Guru Prasad

            Don’t think there was any issue with the code. The universal trick worked. Restarted the device and it started to work 🙂

          • That is the universal trick! I’m glad you got it working 🙂

  • Peter

    Hello,

    thanks for your example. I have little Problem. In my webbrowser it works fine, but on the WP8-Emulator an empty screen appears, just the application header is shown.

    Whats the matter?

    • Last I checked, WP8 was still very experimental with Ionic Framework. My assumption is that you are experiencing problems because of this reason.

      Regards,

  • Siya

    I have implemented it in the same way but i was getting same google api key issues. After reading http://stackoverflow.com/questions/26562150/google-maps-with-ionic/26609666#26609666 i came to know we dont need key these days. Still i am getting blank screen. Can you please help?

    • What do your logs say?

      • Siya

        I am getting following .
        0 689271 error Error: initialize is not defined
        @http://172.27.20.160:8101/js/app.js:38:5
        [email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:12900:14
        $ControllerProvider/this.$get</</<@http://code.ionicframework.com/nightly/js/ionic.bundle.js:17169:11
        nodeLinkFn/<@http://code.ionicframework.com/nightly/js/ionic.bundle.js:16415:13
        [email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:9046:11
        [email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:16414:11
        [email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:15793:13
        [email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:15796:13
        [email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:15672:30
        bootstrapApply/<@http://code.ionicframework.com/nightly/js/ionic.bundle.js:10165:11
        $RootScopeProvider/this.$get<[email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:23116:16
        $RootScopeProvider/this.$get<[email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:23215:18
        [email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:10163:9
        [email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:12900:14
        [email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:10161:1
        [email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:10181:1
        [email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:10075:5
        @http://code.ionicframework.com/nightly/js/ionic.bundle.js:34840:5
        [email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:11459:7
        [email protected]://code.ionicframework.com/nightly/js/ionic.bundle.js:11729:9

        I am novice to this field. So i might do some stupid mistake.

        • Sounds like initialize on line 38 of app.js is not defined. You should probably start there.

          Also, I encourage against testing in your browser. You should build and install to device every time.

          Regards,

          • Siya

            Thanks I have corrected that problem but still i am getting blank screen. This time no error in logs.

          • Maybe put your project on GitHub and I’ll take a look.

            Regards,

  • Visi Hoxha

    very nice tutorial. I personally prefer using ngMap for displaying maps

    • Thanks for the compliment. ngMap is one of probably 100 different ways to do the job. Always nice to have options.

  • nas

    this actually helped me a lot/..thanks!! but how to specify markers on nearby places as well, for example hospitals?

    • I encourage you to read the Google Maps API documentation. I only demonstrated how to get you started and left plenty to be desired through your own research.

      Regards,

  • Alex

    Hi guys, i run this app on my browser and it´s working great.
    But i can´t show it on my android device and i dont understand why the map is not showing?

    i register on google an android key
    i clone the geolocation plugin
    i test the code local on my browser

    Plz, give me some hints, it gives me the willies.

    • What do your logs say?

      • Alex

        The logs says nothing, it just work on my browser, but on my android device the map is not showing

        • Stop testing in the browser. It is not the same as testing on a device and should never be compared to that. If you continue to do that, it is only going to lead you to heartbreak and disappointment.

          How are you checking your logs on the device. Are you doing this?:

          https://www.thepolyglotdeveloper.com/2014/12/debugging-android-source-code-adb/

          Regards,

          • Shrikant

            i am also create a app which is work correctly on my laptop but in mobile device it not show my current location, what i do wrong help me.

          • Is your GPS enabled? Do you have the geolocation plugin installed? Are you getting errors? I need more information to be able to help you.

            Regards,

          • Shrikant

            thanks sir

  • Seydina Omar Ibn Maryam

    Great tutorial! working ideally for me! thanks

  • dhrubo

    This is not working in android device, but working fine in browser

    • Like I tell everyone, do not test your mobile apps in the browser. It is not the same.

      What do your device error logs say?

      Regards,

  • great post Nic,
    is it possible to show us how to add a watch to the current geoposition, to update the position when you walk, and to rotate the screen (like google maps does) in your walk direction, and to keep the screen on and preventing it from getting off.
    that would be great if you add these features to this Post or make a new Post.
    isaid

  • Harry setati

    Great stuff man. How can i get just the address of the specified coordinates and not display the map?

    • You’d have to read the Google Maps API documentation.

      Regards,

      • Harry setati

        Thanks Nic. I got it working

  • Keith Brown

    Nic,
    What is the best way to handle the multiple keys. I guess more importantly, do i need a browser key, ios and android key or will browser do? What urls do i enter for the key? thanks! Keith

    • You only need one key being the web key since it is a hybrid app and you’re not using the native maps sdk.

      Regards,

  • ATS24Seven

    [ google map] Can not run on wp8 (window)

    how to do?

    • Windows Phone is not supported in Ionic Framework

      • ATS24Seven

        My ionic project

        run Camera

        not run Google map , Web Service

      • ATS24Seven

        Thank you. sir

  • Matthew Milligan

    Hello,

    I followed your instructions, but I was unable to view my map in my iOS Simulator. I opened my project in Xcode, but no errors. Help?

    • Is the whitelist plugin installed and configured correctly? My assumption is you have logs that you don’t know you have.

      Regards,

      • Matthew Milligan

        I followed Ionic’s instructions on Whitelisting here: http://docs.ionic.io/docs/cordova-whitelist

        I’m still getting the same results.

      • Matthew Milligan

        I wonder if I am creating the API Key correctly. When I add a new key, Google asks me what kind of key I want to create: Server, Browser, iOS, or Android. Which one do I choose?

        • The JavaScript SDK needs a browser key.

    • Felipe Marinho

      Samething here

  • Hi Nick, How can I implement Google calendar Using Ionic Framework?

  • Jomabell Lascano

    cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
    how can I install this in my cmd i’m just a beginner hahahha please help me 😀

    • Windows does not ship with Git like Mac and Linux do. You must install Git, otherwise your command prompt won’t know how to obtain the plugin.

      Regards,

  • Fernando Montesinos

    Hey Nic, I followed this tutorial and it worked fine, but then I tried to implement it with a different project and i get the following error “Error: google is not defined” and it points to my “controllers.js” here is my code from the “controllers.js”:

    .controller(‘MapController’, function($scope) {
    google.maps.event.addDomListener(window, “load”, function(){
    var myLatlng = new google.maps.LatLng(22.9333, -102.6999);
    var mapOptions = {
    center: myLatlng,
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    });
    });

    any clues as to what it might be?
    Thanks,

    • How about posting your full logs?

      Regards,

      • Fernando Montesinos

        This is what the log says:

        Error: google is not defined

        @http://localhost:8100/js/controllers.js:42:1

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:13277:14

        $ControllerProvider/this.$get</</instantiate<@http://localhost:8100/lib/ionic/js/ionic.bundle.js:17826:24

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:16936:36

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:16368:13

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:16972:1

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:16368:13

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:16372:13

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:16972:1

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:16368:13

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:16972:1

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:16368:13

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:16372:13

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:16243:30

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:52259:5

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:50449:29

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:50369:11

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:52115:5

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:52073:5

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:57485:11

        .compile/</<@http://localhost:8100/lib/ionic/js/ionic.bundle.js:57462:11

        $RootScopeProvider/this.$get<[email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:24992:15

        transitionTo/$state.transition<@http://localhost:8100/lib/ionic/js/ionic.bundle.js:44836:11

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:23394:28

        scheduleProcessQueue/<@http://localhost:8100/lib/ionic/js/ionic.bundle.js:23410:27

        $RootScopeProvider/this.$get<[email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:24673:16

        $RootScopeProvider/this.$get<[email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:24484:15

        $RootScopeProvider/this.$get<[email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:24778:13

        .link/<@http://localhost:8100/lib/ionic/js/ionic.bundle.js:58933:11

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:12098:9

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:2865:3

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:2854:3

        [email protected]://localhost:8100/lib/ionic/js/ionic.bundle.js:2927:5

        • A few possibilities.

          You could be having issues because you’re using Ionic Server or Ionic Live-Reload. I cannot stress enough how much these items should not be used in your testing process
          The controller is trying to access the library before it is loaded. Maybe move the JavaScript include to before your controllers.js or app.js file

          Maybe start there?

          Regards,

  • Jomabell Lascano

    sir whats the problem if the map doesn’t show in the phone?
    because im working my application and and it is ok but when i click the map … it doesnt show but in web if i refresh it the application appears

    • Refresh the application? I don’t know what you mean by this. You’re not using ionic serve, ionic view, or ionic live-reload are you? I find those methods of testing applications never work. What do your logs say?

      We are using the JavaScript SDK so you need the web API key, not Android or iOS.

      Please collect your thoughts and post only one comment at a time so other commenters don’t get a flood of emails from you.

      Regards,

      • Jomabell Lascano

        i use ionic serve :3 but the map doesn’t show :3 and i already have an web api key

        this is my js. please help

        angular.module(‘map’,[])

        .controller(‘MapCtrl’, function($scope, $state, $rootScope){})

        function initMap() {

        var directionsService = new google.maps.DirectionsService;

        var directionsDisplay = new google.maps.DirectionsRenderer;

        var map = new google.maps.Map(document.getElementById(‘map’), {

        });

        directionsDisplay.setMap(map);

        var onChangeHandler = function() {

        };

        document.getElementById(‘start’).addEventListener(‘change’, onChangeHandler);

        document.getElementById(‘end’).addEventListener(‘change’, onChangeHandler);

        }

        function calculateAndDisplayRoute(directionsService, directionsDisplay) {

        directionsService.route({

        }, function(response, status) {

        });

        }

        • I literally just told you that ionic serve is no good. Stop using it.

          I asked for your logs, not your code.

          Regards,

          • Jomabell Lascano

            ok sir.. can you suggest other thing that can help to my problem? thanks 🙂

          • I asked numerous times for your logs. This will be my final response to you until I receive them. I cannot help address your problem until I know your problem.

            If you don’t want to share your logs, I suggest you ask for help in the forums.

            Regards,

          • Jomabell Lascano

            the map doesnt show in my phone 🙁

            1.Uncaught TypeError: Cannot read property ‘addEventListener’ of null

          • Can you paste the full logs associated to that error please? I need to see the full stack trace.

            Regards,

          • Jomabell Lascano

            https://uploads.disquscdn.com/images/40fe7efbe94d2b407b232d089b3a714d31abc8c2a916dccd620c57279f432463.png

            is this what you mean? :3 help sir :3 THANKS! :3 correct me if im wrong

            angular.module(‘map’,[])

            .controller(‘MapCtrl’, function($scope, $state, $rootScope){})

            function initMap() {

            var directionsService = new google.maps.DirectionsService;

            var directionsDisplay = new google.maps.DirectionsRenderer;

            var map = new google.maps.Map(document.getElementById(‘map’), {

            });

            directionsDisplay.setMap(map);

            var onChangeHandler = function() {

            };

            document.getElementById(‘start’).addEventListener(‘change’, onChangeHandler);

            document.getElementById(‘end’).addEventListener(‘change’, onChangeHandler);

            }

            function calculateAndDisplayRoute(directionsService, directionsDisplay) {

            directionsService.route({

            }, function(response, status) {

            });

            }

          • That isn’t the stack trace. Please expand the error and paste the full exception.

            Regards,

  • Jomabell Lascano

    please help me :3 i really need this to work… 🙁

  • Jomabell Lascano

    what kind of api i need to work in my phone?? server? web? android? 😀 🙂 thank you for the answer 🙂 and helping me 🙂

  • Hemant

    Hi Nic,

    I followed all steps. I was able to see map on browser but I get “ReferenceError: Can’t find variable: google” error on iOS Simulator. I am using iPhone 6 Simulator. Followings are the log:

    Sep 21 17:40:13 Hemants-MacBook-Pro CoreSimulatorBridge[5958]: Requesting installation of file:///Users/Hemant/documents/ionic/IonicExample/platforms/ios/build/emulator/IonicExample.app/ with options: {

    Sep 21 17:40:13 Hemants-MacBook-Pro CoreSimulatorBridge[5958]: LaunchServices: installing app for existing placeholder com.ionicframework.ionicexample264418 <(null) Not found in database>

    Sep 21 17:40:13 Hemants-MacBook-Pro CoreSimulatorBridge[5958]: LaunchServices: Not creating progress for com.ionicframework.ionicexample264418 <(null) Not found in database> since it is not a placeholder.

    Sep 21 17:40:13 Hemants-MacBook-Pro installd[5943]: 0x109b12000 -[MIClientConnection installPath:withOptions:completion:]: Install of “/Users/Hemant/documents/ionic/IonicExample/platforms/ios/build/emulator/IonicExample.app” type Developer requested by CoreSimulatorBridge (pid 5958)

    Sep 21 17:40:14 Hemants-MacBook-Pro installd[5943]: 0x109c9b000 -[MIInstaller performInstallationWithError:]: Installing

    Sep 21 17:40:14 Hemants-MacBook-Pro installd[5943]: 0x109c9b000 -[MIContainer makeContainerLiveReplacingContainer:reason:withError:]: Made container live for com.ionicframework.ionicexample264418 at /Users/Hemant/Library/Developer/CoreSimulator/Devices/05AD50CC-5FA9-4922-9A01-EFD1F880C006/data/Containers/Data/Application/20C22495-D9F4-4357-886B-BB54A38F0263

    Sep 21 17:40:14 Hemants-MacBook-Pro installd[5943]: 0x109c9b000 -[MIContainer makeContainerLiveReplacingContainer:reason:withError:]: Made container live for com.ionicframework.ionicexample264418 at /Users/Hemant/Library/Developer/CoreSimulator/Devices/05AD50CC-5FA9-4922-9A01-EFD1F880C006/data/Containers/Bundle/Application/6F89E7DB-6A80-4F3A-B973-250432887D25

    Sep 21 17:40:14 Hemants-MacBook-Pro CoreSimulatorBridge[5958]: LaunchServices: NotifiedObservers com.ionicframework.ionicexample264418 <file:///Users/Hemant/Library/Developer/CoreSimulator/Devices/05AD50CC-5FA9-4922-9A01-EFD1F880C006/data/Containers/Bundle/Application/6F89E7DB-6A80-4F3A-B973-250432887D25/IonicExample.app> was installed

    Sep 21 17:40:14 Hemants-MacBook-Pro CoreSimulatorBridge[5958]: Requesting launch of com.ionicframework.ionicexample264418 with options: {

    Sep 21 17:40:15 Hemants-MacBook-Pro IonicExample[6005]: assertion failed: 14F27 13A340: libxpc.dylib + 71578 [5150F854-0B13-3C60-8B86-891EC976986E]: 0x7d

    Sep 21 17:40:15 Hemants-MacBook-Pro IonicExample[6005]: DiskCookieStorage changing policy from 2 to 0, cookie file: file:///Users/Hemant/Library/Developer/CoreSimulator/Devices/05AD50CC-5FA9-4922-9A01-EFD1F880C006/data/Containers/Data/Application/20C22495-D9F4-4357-886B-BB54A38F0263/Library/Cookies/com.ionicframework.ionicexample264418.binarycookies

    Sep 21 17:40:15 Hemants-MacBook-Pro IonicExample[6005]: Apache Cordova native platform version 3.8.0 is starting.

    Sep 21 17:40:15 Hemants-MacBook-Pro IonicExample[6005]: Multi-tasking -> Device: YES, App: YES

    Sep 21 17:40:15 Hemants-MacBook-Pro IonicExample[6005]: Unlimited access to network resources

    Sep 21 17:40:15 Hemants-MacBook-Pro IonicExample[6005]: [CDVTimer][keyboard] 0.079036ms

    Sep 21 17:40:15 Hemants-MacBook-Pro IonicExample[6005]: [CDVTimer][splashscreen] 42.623043ms

    Sep 21 17:40:15 Hemants-MacBook-Pro IonicExample[6005]: [CDVTimer][TotalPluginStartup] 43.056011ms

    Sep 21 17:40:15 Hemants-MacBook-Pro IonicExample[6005]: Resetting plugins due to page load.

    Sep 21 17:40:15 Hemants-MacBook-Pro IonicExample[6005]: App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app’s Info.plist file.

    Sep 21 17:40:15 Hemants-MacBook-Pro IonicExample[6005]: Finished load of: file:///Users/Hemant/Library/Developer/CoreSimulator/Devices/05AD50CC-5FA9-4922-9A01-EFD1F880C006/data/Containers/Bundle/Application/6F89E7DB-6A80-4F3A-B973-250432887D25/IonicExample.app/www/index.html

    Sep 21 17:40:49 Hemants-MacBook-Pro CoreSimulatorBridge[5958]: Requesting installation of file:///Users/Hemant/documents/ionic/IonicExample/platforms/ios/build/emulator/IonicExample.app/ with options: {

    Sep 21 17:40:49 Hemants-MacBook-Pro CoreSimulatorBridge[5958]: LaunchServices: installing app for existing placeholder com.ionicframework.ionicexample264418 <(null) Not found in database>

    Sep 21 17:40:49 Hemants-MacBook-Pro CoreSimulatorBridge[5958]: LaunchServices: Not creating progress for com.ionicframework.ionicexample264418 <(null) Not found in database> since it is not a placeholder.

    Sep 21 17:40:49 Hemants-MacBook-Pro installd[5943]: 0x1067b9000 -[MIClientConnection installPath:withOptions:completion:]: Install of “/Users/Hemant/documents/ionic/IonicExample/platforms/ios/build/emulator/IonicExample.app” type Developer requested by CoreSimulatorBridge (pid 5958)

    Sep 21 17:40:49 Hemants-MacBook-Pro installd[5943]: 0x107881000 -[MIInstaller performInstallationWithError:]: Installing

    Sep 21 17:40:49 Hemants-MacBook-Pro installd[5943]: 0x107881000 -[MIInstallableBundlePatch applyPatchWithError:]: Attempting patch update of com.ionicframework.ionicexample264418 from 0.0.1 (0.0.1) to 0.0.1 (0.0.1)

    Sep 21 17:40:49 Hemants-MacBook-Pro com.apple.CoreSimulator.SimDevice.05AD50CC-5FA9-4922-9A01-EFD1F880C006.launchd_sim[5933] (UIKitApplication:com.ionicframework.ionicexample264418[0x2e5a][6005]): Service exited due to signal: Killed: 9

    Sep 21 17:40:49 Hemants-MacBook-Pro installd[5943]: 0x107881000 -[MIInstallableBundle _refreshUUIDForContainer:withError:]: Data container for com.ionicframework.ionicexample264418 is now at /Users/Hemant/Library/Developer/CoreSimulator/Devices/05AD50CC-5FA9-4922-9A01-EFD1F880C006/data/Containers/Data/Application/78C6F522-25BF-4CFB-AAE8-3D8C074EFB01

    Sep 21 17:40:49 Hemants-MacBook-Pro installd[5943]: 0x107881000 -[MIContainer makeContainerLiveReplacingContainer:reason:withError:]: Made container live for com.ionicframework.ionicexample264418 at /Users/Hemant/Library/Developer/CoreSimulator/Devices/05AD50CC-5FA9-4922-9A01-EFD1F880C006/data/Containers/Bundle/Application/74664C00-9549-4A14-87DF-CBD37878A10C

    Sep 21 17:40:49 Hemants-MacBook-Pro CoreSimulatorBridge[5958]: LaunchServices: NotifiedObservers com.ionicframework.ionicexample264418 <file:///Users/Hemant/Library/Developer/CoreSimulator/Devices/05AD50CC-5FA9-4922-9A01-EFD1F880C006/data/Containers/Bundle/Application/74664C00-9549-4A14-87DF-CBD37878A10C/IonicExample.app> was installed

    Sep 21 17:40:49 Hemants-MacBook-Pro SpringBoard[5950]: [com.ionicframework.ionicexample264418 (6005)] Kill failed. Error: No such process (3)

    Sep 21 17:40:49 Hemants-MacBook-Pro SpringBoard[5950]: Application ‘UIKitApplication:com.ionicframework.ionicexample264418[0x2e5a]’ exited abnormally via signal.

    Sep 21 17:40:49 Hemants-MacBook-Pro CoreSimulatorBridge[5958]: Requesting launch of com.ionicframework.ionicexample264418 with options: {

    Sep 21 17:40:49 Hemants-MacBook-Pro IonicExample[6175]: assertion failed: 14F27 13A340: libxpc.dylib + 71578 [5150F854-0B13-3C60-8B86-891EC976986E]: 0x7d

    Sep 21 17:40:49 Hemants-MacBook-Pro IonicExample[6175]: DiskCookieStorage changing policy from 2 to 0, cookie file: file:///Users/Hemant/Library/Developer/CoreSimulator/Devices/05AD50CC-5FA9-4922-9A01-EFD1F880C006/data/Containers/Data/Application/78C6F522-25BF-4CFB-AAE8-3D8C074EFB01/Library/Cookies/com.ionicframework.ionicexample264418.binarycookies

    Sep 21 17:40:49 Hemants-MacBook-Pro IonicExample[6175]: Apache Cordova native platform version 3.8.0 is starting.

    Sep 21 17:40:49 Hemants-MacBook-Pro IonicExample[6175]: Multi-tasking -> Device: YES, App: YES

    Sep 21 17:40:49 Hemants-MacBook-Pro IonicExample[6175]: Unlimited access to network resources

    Sep 21 17:40:49 Hemants-MacBook-Pro IonicExample[6175]: [CDVTimer][keyboard] 0.066996ms

    Sep 21 17:40:49 Hemants-MacBook-Pro IonicExample[6175]: [CDVTimer][splashscreen] 38.354993ms

    Sep 21 17:40:49 Hemants-MacBook-Pro IonicExample[6175]: [CDVTimer][TotalPluginStartup] 38.756967ms

    Sep 21 17:40:49 Hemants-MacBook-Pro IonicExample[6175]: Resetting plugins due to page load.

    Sep 21 17:40:49 Hemants-MacBook-Pro IonicExample[6175]: App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app’s Info.plist file.

    Sep 21 17:40:54 Hemants-MacBook-Pro IonicExample[6175]: Finished load of: file:///Users/Hemant/Library/Developer/CoreSimulator/Devices/05AD50CC-5FA9-4922-9A01-EFD1F880C006/data/Containers/Bundle/Application/74664C00-9549-4A14-87DF-CBD37878A10C/IonicExample.app/www/index.html

    • Hemant

      Found the fix. noticed “App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app’s Info.plist file.” in log. Changed script reference url to https and it worked

      • Awesome, thanks for sharing your solution 🙂

  • Richard Shergold

    Hi Nic.

    I just cannot get this to work with my Ionic project.

    I get the error “can’t find the variable google” as soon as my code tries to access the google maps api. I’ve seen the comment below about changing to https from http but I still get the error.

    Does your code still work for iOS 9 ?

    I’m pretty sure under iOS 8 I had something working (and I think it was based on your code).

  • Richard Shergold

    Nick. I got it to work. I needed to add this at the top of my index.html:

    thanks

    Richard

    • Yea whitelisting is always a pain!

      Glad you got it working 🙂

    • Hi, I also tried to whitelist like you did but it don’t work for me…
      Here is my CSP:

      And I still have a 404…

  • cxfire16

    This tutorial works perfect! thanks Nic!
    Everything worked in the browser as instructed, however, I want to ask a few questions regarding the app being executed in Genymotion, I’ve already set the GPS coordinates on the virtual device, I’ve made it run on the virtual device itself and it works perfectly, the problem is, it won’t home to my current location as defined by the coordinates I typed in. I noticed this only happens to devices(actual/virtual), not to browsers as browsers get my current location immediately. Can I ask your opinion about it? or suggestions? Thanks Nic! 😀

    • For devices there are a few different types of GPS precision:

      Hardware GPS
      Wifi / Cellular GPS
      Both hardware and cellular

      You might check what is enabled on your device. Hardware GPS is always going to be slower because it takes time to find a signal.

      Also, check your logs in case you’re getting errors and don’t realize it.

      Best,

      • cxfire16

        Hi Nic!

        Thanks for the reply! I just figured it out what was wrong with my code 🙂 After CAREFULLY reading the

        documentation, I realized that I needed the “document.addEventListener(“deviceready”, onDeviceReady, false); ” part, which was missing in my code. now it works like a charm! thanks for the help nic! owh and btw you’re right, Hardware GPS does take quite some time to appear 😀

        logs are clear 🙂

        thanks!

        • Awesome! Glad you got it working 🙂

  • arun

    man great work!!!
    I run in my android device google map displaying but the marker image is not displaying !!!! What is issue man??

    • What do your logs say?

      • arun

        man actually in browser its working fine, but in device that marker image dnt display…

        • Thats cool. I can’t help you any further without seeing your logs.

          Regards,

          • arun

            ok Man, Actually image path is problem i think, because if image path is directly access from internet its working in browser and also mobile device but in local system image it working in browser but not working in device. This is my problem … 🙂

  • Gabriel Vieira

    Hi Nic , i had a same code , but my map shows a white screen , in android 4.2.2 , not show errors or warnings , but in 4.4 works well

    • Probably an issue with the Android browser. 4.4 had the first truly stable Android browser. If you use Crosswalk, it should fix things.

  • arun

    Hi Nic,
    Your tutorial is so nice, Actually i have doubt. I am new for ionic framework. I am developing the app i need to initiate two maps in different pages. If it possible ??

    • Why wouldn’t it be?

      • arun

        Actually I am initialize the maps in first page and also i generated the maps in second page also but it work’s fine in first page, not worked in second page.

        In the angular part, i am initialize the first map using one controller. And also for second map using another controller..

        Developer Tool consle: Uncaught TypeError: Cannot read property ‘offsetWidth’ of null

        Xg @ js?v=3.exp&libraries=places:68

        Lh @ js?v=3.exp&libraries=places:77

        initialize @ controllers.js:50

        controller .js:50 —–> var map = new google.maps.Map(document.getElementById(“map_canvas”));

        Hi mate I think you give a solution for me…. 🙂

  • munz

    i have tried to use ngCordova geolocation instead, it worked fine in the browser but kept crashing on the emulator !!!

  • arun

    Hi NIC,

    Actually I am initialize the maps in first page and also i generated the maps in second page also but it work’s fine in first page, not worked in second page.

    In the angular part, i am initialize the first map using one controller. And also for second map using another controller..

    Developer Tool consle: Uncaught TypeError: Cannot read property ‘offsetWidth’ of null

    Xg @ js?v=3.exp&libraries=places:68

    Lh @ js?v=3.exp&libraries=places:77

    initialize @ controllers.js:50

    controller .js:50 —–> var map = new google.maps.Map(document.getElementById(“map_canvas”));

    Hi mate I think you give a solution for me…. 🙂

    • Posting the same thing multiple times is a quick way TO NOT get any help from me. I get many comments every day and it takes me time to respond to all of them. Seeing someone post the same thing multiple times to try to get my attention just frustrates me.

      Wait patiently, or post in the forums if you need a faster response.

      Regards,

  • Vitthal Walunj

    Nice……

  • Vitthal Walunj

    Hey, Nic i’m unable to get floor numbers of mall on map. What can I do?

  • Omar Sallah

    Thanx for your tut, it helps me a lot! But actually I have a problem :
    I
    added your code to my application that is based on “sidemenu” so I
    added an html page “map.html” to the template file, I added your
    controller file “controller.js” and I added a “state” in my file
    “app.js” to locate “map.html”.
    The porobleme is that when I call “map.html” the map is not displayed, but when I refresh the browser the map displays.

  • Omar Sallah

    Thanx for your tut, it helps me a lot! But actually I have a problem :
    I added your code to my application that is based on “sidemenu” so I added an html page “map.html” to the template file, I added your controller file “controller.js” and I added a “state” in my file “app.js” to locate “map.html”.
    The porobleme is that when I call “map.html” the map is not displayed, but when I update the browser, the map displays

    • Do not test in a browser. What do your device or simulator logs say?

  • Sudhir Raj

    Hi Nic,

    I have successfully implemented google map to my project using ionic. I am able to get my current location also using this, but I need to link this to my mysql database and need to find the place3s that are in my database which are present near my current location.So i need your guidance to perform this action.

    • Sudhir Raj

      For example need to find all the service providers near my current locations that are registered with us.

      • If you wish to get data from MySQL, you’re going to have to create a RESTful web application. Then you can loop through the result set based on what the web service responds with, placing markers where appropriate.

        • Sudhir Raj

          Ok. I have one Idea because i have only 7 main customer in database so i have an idea of hardcore the latitude and longitude value in the database and through this can i search the map for the positions in the map where the respective places are already marked in the map.
          I am just trying this now if it works fine are else i will need a detailed guidence from you.Also i need to search for all the places in my database which are near to my current location.
          I am trying all hope to pass on if not guide me.

          • Sudhir Raj

            Hai Nic

            I got this working i tried some other method. Thanks for your valuable information.

  • tombrokeoff

    Can you possibly clear up some confusion for me, please? I have read conflicting posts on the web stating whehter or not you need an API key when using ionic/cordova. I am building a web app, along with 2 mobile apps, for a client. I have a JavaScript API key for the web app, but I specified his domain specifically to use the API key. How does this translate over to the Android and iOS apps? Do I create a new key for those and not specify a domain? This should be simple, and maybe I am over-complicating it, but I just seem to read conflicting stuff on the web.

    • I’m pretty sure you need a key because Google charges after so many requests. I’d create another key without the origin set for the mobile app.

      • tombrokeoff

        That’s what I will do. Thanks, Nic. Much appreciated. Oh, since I am using Ionic, I still just use the JavaScript key for both Android and iOS apps, correct? Thanks and Merry Christmas.

  • hallo nic, i’m new on mobile and web programming, I’m very impresive to your blog and your dedication to share your knowladge, I have read your blog, and i have tried implementation your blog, but the map does not appear ? can you give me source sample, the second question. I have registered for api key on https://console.developers.google.com, but my api key is appear result : InvalidKeyOrUnauthorizedURLMapError

    sorry to take your time nic. and i’ waiting your answer
    thank you

  • vijay

    hi,nic one doubt

  • Jason

    He Nic,

    Thanks for another awesome tut!

    I’ve noticed that this seems to work fine on my android 5 sony xperia z1 but crashes on my nexus 6p as soon as markers are on the map and I start interacting with it. (i.e. zoom, drag etc.) My guess is that there’s somehow an incompatibility with android 6.

    would you have any thoughts as to why this might happen?

    Cheers,

    Jason.

    • What do your logs say?

      • Jason

        He Nic, please excuse the obviously novice question but how do I check my logs? I can do chrome://inspect but the app disconnects as soon as it crashes, leaving me with nothing.

        Jason.

      • Sebas Jan

        Exactly the same issue for me also. I created this ionic project and built it with phonegap build. See https://dl.dropboxusercontent.com/u/1275078/HelloCordova-debug.apk try nexus 6p / nexus 5x and move the map around after it gets you position. The app crashes every single time.

        Source code is here https://dl.dropboxusercontent.com/u/1275078/HelloCordova-Location.zip

        Looks like a google maps bug when using it with cordova. Any ideas? No useful error in logcat.

        • Feliks Albright

          I figured it out! 😀

          I literally spent hours till I got it. All you have to do is set draggable to true on the markers like this:

          var marker = new google.maps.Marker({
          position: markerLatLng,
          map: map,
          title: tempItems[i].name,
          draggable: true
          });

          The problem was only happening on my Nexus 5x, but it worked on an iPhone6, iPhone5c, and the Asus Zenphone 2. If this doesn’t work, comment out your markers and see if the maps come up at all. For me, it was ONLY the markers that where causing troubles.

    • Sebas Jan

      Jason, please see my comment below with links to app. Let me know if you managed to find a solution.

  • Jessica Thompson

    im creating a map section within my app that will find nearby health services for users.
    using these three api services
    google maps geolocation api
    google maps javascript api
    google place api webservices

    I have the following code :

    var geocoder = new google.maps.Geocoder(); // use geocoder to convert user current location into adress

    var options = {

    navigator.geolocation.getCurrentPosition(function(pos) {

    $scope.convert_location = JSON.stringify($scope.position);

    $scope.main_location = JSON.parse($scope.convert_location); // here you w’ll get user current location lattitude and longitutude

    if(status == google.maps.GeocoderStatus.OK) {

    var add=results[1].formatted_address; // address of user current location

    // console.log(add);

    }

    });

    //Used google place api

    var map;

    $scope.places_names=[];

    var options = {

    var pyrmont = $scope.main_location;

    map = new google.maps.Map(document.getElementById(‘map’), {

    center: pyrmont,

    zoom: 14,

    mapTypeId: google.maps.MapTypeId.TERRAIN

    });

    service.nearbySearch({

    location: pyrmont,

    radius: 1000,

    types: [‘Health’]

    }, callback);

    function callback(results, status) {

    if (status === google.maps.places.PlacesServiceStatus.OK) {

    for (var i = 0; i < results.length; i++) {

    createMarker(results[i]);

    }

    }

    }

    // marker

    function createMarker(placesname) {

    var placeLoc = placesname.geometry.location;

    var image = ‘icons/finder.png’;

    var marker = new google.maps.Marker({

    map: map,

    position: placesname.geometry.location,

    icon:image

    });

    $scope.places_names.push(placesname.name);

    console.log(placesname);

    }

    Please can you tell me how I would add this to a controller and html files

    thanks

  • Miller Dann

    Hi Nic,
    Nice tutorial.

    One question though, how would I make the cordova-plugin-network-information check for network connection before trying to download the maps API script? My app crashes every time there’s no internet 🙁

    • Can you paste your logs when it crashes?

      I find it weird that it would crash your application when just trying to include the script tag.

      Best,

  • arsene

    here the markers places
    app.controller(‘hotelMap’,function($scope){

    google.maps.event.addDomListener(window,”load”,function(){

    var latLnt = new google.maps.LatLng(-11.666918, 27.483733);
    var options =
    {
    center : latLnt,
    zoom : 14
    };
    var map = new google.maps.Map(document.getElementById(‘mapHotel’),options);
    $scope.map=map;
    //LISTE DE CORDONNEE DES HOPTALS
    var life= new google.maps.LatLng(-11.666918, 27.483733);
    var karavia = new google.maps.LatLng(-11.652274, 27.454262);
    var holybum = new google.maps.LatLng(-11.640270, 27.486479);
    var park = new google.maps.LatLng(-11.665392, 27.486892);
    var lubum = new google.maps.LatLng(-11.660779, 27.486699);
    var cosmopolite = new google.maps.LatLng(-11.667304, 27.484226);
    var riverside = new google.maps.LatLng(-11.634751, 27.456948);
    var bougain = new google.maps.LatLng(-11.660039, 27.457944);
    var ng = new google.maps.LatLng(-11.669101, 27.480235);
    var gloria = new google.maps.LatLng(-11.669101, 27.480235);

    });
    })
    and my css file
    #mapHotel{
    width: 100%;
    height: 100%;
    }
    .scroll {
    height: 100%;
    }

  • Jeffrey

    I am getting this error while on my android phone and browser “This page was unable to display a google maps element”

  • gugasevero

    Nice tutorial Nic.
    I will need something advance. When I open the map, show my location with a pin mark.

  • gugasevero

    Nic, I just tried to follow your tutorial, but an error appears when I try to install cordova plugin for map.

  • gugasevero

    Hi Nic
    I followed your steps above, but the map doesn’t appear!
    How can I show you my codes?

  • akram zaki

    Hey Nic. I try to run in the emulator the map doesn’t appear. The thing that only appear is Ionic Blank Starter

  • Sihem Hcine

    Hi Nic, thank u for this tuto, it helps me a lot. But I have a small problem. I display Google Map using tab. When i access directly to the tab URL that contains Google map, it works but when i access to the tab from the other tab URL it doesn’t work and nothing is appeared on the console. Can you help me please.

  • SHH

    Hi Nic,

    I looked at your tutorial to help get my google places API working with cordova geolocation. I’m using everything you put above except for in the html I put the script src google places api and key, and in app.js after $scope.map = map; I put a request variable (location, radius, types of places), infowindow variable, services variable, callback function (results, status), a create marker function on the place, and a event listener for the info window.

    The google places API works well with the Lat/Lon I set, and when I pull it up in firefox, and it asks for my location, it notices my location correctly and adds a marker, but completely disregards everything else mentioned above, that works well until it asks my location and changes to that. I’m very new to development and not sure how to get the API and geolocation correctly working hand in hand as they now both work but separately.

    Working in Ionic, testing in firefox (open with firefox or ionic serve)
    Nothing is showing up in my console.log on firefox

    Thank you!

    • What happens on a device without using Ionic Serve? I ask because browsers and Ionic Serve tend to be totally different than what happens on a device.

      • SHH

        Thanks, it does the same thing. Should I send you my code to take a look? I just can’t figure out why they aren’t working together.

        • Put your project on GitHub and I’ll take a look.

          Best,

          • SHH

            Thank you (apologize for the late response just saw your reply), maybe this would be easier I posted the code as a question on stack overflow the other day: http://stackoverflow.com/questions/36559462/google-places-api-not-working-with-getcurrentposition-geolocation-in-ionic-app/36561941#36561941 . Someone answered but I’m still not clear from their response (very new to this). If that doesn’t work I’ll put it on Github. Thank you for your help!

          • Unless I don’t truly understand the issue, I agree with the person that commented. The getCurrentPosition function is asynchronous so the nearby places call is likely executing before the position is obtained. Different devices will get the GPS data at different speeds.

          • SHH

            I guess where I am confused is I don’t understand the person’s response and therefore how to proceed. I just recently taught myself javascript and angularjs so this is all pretty new to me. Not clear if I put service.nearbySearch(…) right under navigator.geolocation.getCurrentPosition(function(pos) { before map.setCenter and what it should include in the (…)? I did some research but couldn’t find an example similar yet. I’m also pretty confused on how to get the nearbySearch callback to keep an array of the markers. If this is beyond the scope of asking for help here than no worries, and thank you for your prior advice.

          • I think you would benefit from taking a step back. Do some homework on asynchronous programming, the use of callbacks, and the use of promises.

            After you’ve done this, give it another shot. I’m betting it will make more sense.

          • SHH

            Thank you! Will check that out now.

  • WebDesarrollador

    Thank you very much

  • Mert

    I am new to Ionic and I tried to implement this a for map.html page rather than index.html page and it shows nothing. Here is the stackoverflow page, if you check this out I’ll be appreciated. Thank you.

    http://stackoverflow.com/questions/37064801/google-map-is-not-working-in-ionic-application

  • Devunuri Saipraneeth

    Hi Nic thank you for the wonderful tutorial. I was trying around couple of things from 2 days using cordova geolocation, phonegap-googlemaps plugin etc. They all seem to be working fine in browser but are not working in my android phone. I am not getting any errors except time out error if i put timeout. i hope u can help me with this.Thanks in Advance

    • Do you have the proper android whitelisting in place? If you’re trying to use ionic serve our ionic live reload you should stop

      • Devunuri Saipraneeth

        I have proper whitelisting. I restarted my phone accidently and the location started working. It was the same case on other android devices i tested. This ran me so crazy. You have any idea to sort this

  • prasad

    Google map loaded at once, then i went back and came to same page, map is not getting loaded in browser and in ios mobile the map page coming blank.. thanks!

    • What do your logs say?

      • prasad

        sorry for late reply..Hi Nic , i am new to ionic i was trying to implementation map from your wonderful tutorial. i am testing in ios device the map view coming blank page… every time i am sending lat long values when controller fire in console log coming like this..

        center (39.06339, -77.16041999999999) { lat=function(), lng=function(), toString=function(), more…}
        mapTypeId “roadmap”
        zoom 14

  • Sean Yap

    Hi Nic, great tutorial. However, I’m facing an issue. Despite following your Youtube guide on this exactly, I still can’t get it to work. My Android phone and browser always displays the same error, as seen in the image below. I didn’t implement the geo-location parts yet. Could it be something with my Google API key?

  • sowmya k

    im using cmd prompt and atom for the above code. Im just getting IONIC BLANK STARTER as the output and I can not see the map. please help me.

  • Meghan

    Hi Nic, this is my first application on ionic and totally new to the framework and the angularjs. I followed the instructions as you showed in the tutorial. My browser displays the map correctly, but my android application doesn’t. I use Visual Studio 2015 as IDE and I have attached my logs below for your reference. The error thrown is with respect to the ripple.js file.

    Furthermore I wish to create an application that would display a marker with a current position of the user. If you could tell me precisely how to do that, it would be of great help. Thanks.

    • If you’re new to Ionic and Angular you might be better off starting with Ionic 2 and Angular 2. Using Ionic 1 and Angular 1 is fine, but learning probably not since you’re already going to be stuck in the past.

      Just my advice.

  • Chaiya Louer

    I have follow your article but my ionic was blank. Console also doesn’t show error.

    • How are you checking your logs?

      • Chaiya Louer

        Hello Nic, I checked log and my map appeared. Thank You!

  • SHH

    Hi Nic,

    I am having few issues with the google maps API in Ionic 2 running on an iphone and finding an ionic 2 solution in general. If you could please help lead me in the right direction it would be much appreciated!

    1) When I ionic serve the google map comes up fine and right away. However, when I run on iPhone, it does infinite loading until I press the Ionic side menu and then all of a sudden the map and markers shows up right away. If I never press side menu it will load forever.

    2) Google places API autocomplete works fine when I ionic serve. When I pull it up on an iPhone it won’t work. The places show up when I search, but when I press a place in the list nothing happens, it should fill the search box with the place I pressed but does not.There are solutions out there for ionic1/Angular 1, but none of them work with ionic2/angular2.

    3) In Ionic 2 is there a way to automatically open the datetime component after an event like pressing the OK button in an ion-select modal? So it will go directly from pressing ok to selecting/pulling up a time. I have yet to find a solution to directly do this.

    Thank you for your help!

  • Prince Lamba

    Hi Nic , Are you having any post Regarding Finding nearby fuel pumps to your current location in google maps in Ionic App
    Thanks in Advance

  • shubham singh

    there is a problem occurred like that api not connected map error .
    the map is shown but a while it goes out with an error message something went wrong.
    plz fix this problm….

  • asep furkon efendi

    thanks it’s work and nice tutorial….

    but I have a problem
    when I moved locations and opening applications
    map position has not changed.or not refresh my map

    sorry my bad english language

  • Norman Dube

    Hi Nic, how can i get to calculate distance from current position using Ionic framework??

  • Siva

    Hi,
    I’m facing an issue like map is not loading while revisiting map page. In my app, I have two tabs. One tab is showing list and another one is showing Map. Also I have a search page too.
    I can see the map whenever I’m visiting the map tab at first time. But If I’m navigate to search page and come back to Map tab. I’m unable to see the Map in map tab. Function is working fine. But map is appending in html again.

    I’m using Ionic 2 and Typescript.

    Please help me on this.

  • abhay singh

    Hi first of all thanks for sharing this nice tutorial it’s working fine for me . My question is how to print physical address through latlong and how to implement search functionality ? Thanks in Advance

    • You’d have to read the Google Maps API documentation for this.

      Best,

  • Thananwat Thanabowornsawat

    google map not work on ionic tab

    please let me how to solved

  • Amit Karmakar

    Hello Nic!!!! I hope you are doing well. Nic Can you please explain how can i implement Geo Fencing with ionic.I got one example but not working at all and also provided wrong information.Can you please me out?

    • Amit Karmakar

      Hi, I haven’t get any solution yet.Can you please help me out.I have one project but it gives error when i am building the project on android platform

  • Tim

    Hi Nic, I am working on a project for a mentoured research at the College of New Jersey I Followed your tutorial to a point but all I get rendering in my view is a small little white box (picture attached). I can not for the life of me figure out why this is happening any help is appreciated. https://uploads.disquscdn.com/images/aeb21b8bb70ed3053ee59562168d3bf1beeae792c62b9947f8f6742f0fd16837.png https://uploads.disquscdn.com/images/bdc4921927258e0f4943eb342eda63ced240d67b331929287b87350093d055e4.png

  • Dhaval Shah

    I have followed all the steps which you have given but it shows White Screen only. Maps are not loading at all.

  • Tester Medma Tester Medma

    Hey Nic, when I navigate to some other page and move back to map page my map is not loading. I think its due to I am injecting google script on index.html and using its function in map.html . How to resolve this

  • Shagun Nikam

    Thanks for tutorial.

  • Shagun Nikam

    how do i add input type (like search input field) on map can u help me please???

  • Shagun Nikam

    how can i add marker and info??

  • Shagun Nikam

    marker is not working anymore please help.

  • Ricardo BT

    tu pinche tutorial es una mierda krnal, me cagas al chile.
    Aguas porque por eso amanece a gente muerta broder