Adding google maps Api to a project build with Bower & Grunt

Question

I'm working with the Yeoman webapp generator ( https://github.com/yeoman/generator-webapp ) and I've added the Bower package GMAPS ( https://github.com/hpneo/gmaps ). After adding Gmaps to my project I add the Google Api link in the top of my project like this

<!-- build:css(.tmp) styles/main.css -->
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

Problem is, when I use the Grunt Serve command that I see my Gmaps appearing on my website that runs on my localhost. If I Grunt and build my project it always gives me an error that in my main.js file it cannot find the variable Gmaps (that is used to trigger the Gmaps-plugin).

So my question: How do I add API's to a project that is build with Grunt?

Answer 1

You need to copy google api link outsite the generators tags in the index.html. For example:

<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<!-- build:js(.) scripts/vendor.js -->
</script>
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
</script>
<!-- endbower -->