Adding google maps api 3 to app

ionic-v1
1

I am having a pretty hard time getting google maps added to my app
The goal is to add a map to my page and list of nearby POI’s when you click on one of the list items it should add a marker to the map.

ok, I started when the ionic map example, but some how it just stopped working. Now the page is just blank and there are no errors showing in the console

Here is my code

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>


<!-- google maps javascript -->
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>

Controller:
.controller(‘MapCtrl’, function($scope, $ionicLoading, $compile) {
function initialize() {
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);

    var mapOptions = {
      center: myLatlng,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

    //Marker + infowindow + angularjs compiled ng-click
    var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
    var compiled = $compile(contentString)($scope);

    var infowindow = new google.maps.InfoWindow({
      content: compiled[0]
    });

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
    });

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

    $scope.map = map;
  }
  google.maps.event.addDomListener(window, 'load', initialize);

  $scope.centerOnMe = function() {
    if(!$scope.map) {
      return;
    }

    $scope.loading = $ionicLoading.show({
      content: 'Getting current location...',
      showBackdrop: false
    });

    navigator.geolocation.getCurrentPosition(function(pos) {
      $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
      $scope.loading.hide();
    }, function(error) {
      alert('Unable to get location: ' + error.message);
    });
  };

  $scope.clickTest = function() {
    alert('Example of infowindow with ng-click')
  };

})

Template



NEAR YOU
  • Muss & Turners
  • Willy’s
  • Meehan’s
  • China Moon
  • Marlow’s Tavern
  • Kuroshio Sushi Bar and Grille Swapna Indian Cuisine

    • Any help or direction how to accomplish my task would be greatly appreciated,

    2

    hi i will recommend to use google map directive

    http://angular-ui.github.io/angular-google-maps/#!/

    try it out :smile:

    3

    Thank you for responding, I did trying to use this the angular google maps directive but I had some issues adding markers, maybe you can show an example of adding markers?

    Thanks

    4

    I think I missed the example section of the google map directive. I think i am good now.
    Thanks

    1 Like