Programming Steps: 208 Ionic-v1 Google Maps Example: Nightly

Friday, June 2, 2017

208 Ionic-v1 Google Maps Example: Nightly

Google Maps Example: Nightly
The original codes contains 2 errors; 1)$scope.loading.hide is not a function, 2)Google Maps API warning: SensorNotRequired.
The codes below have been revised. The Find Your Location function may not work on this blog.(ref: Geolocation access has been blocked because of a Feature Policy applied to the current document. See https://goo.gl/EuHzyv for more details.)
Instead, try to run the code on Codepen with https.
code example:

<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es">
    </script>
    
<style>
#map {
  width: 100%;
  height: 100%;
}

.scroll {
  height: 100%;
}  
    </style>
  </head>
  <body ng-controller="MapCtrl">
    <ion-header-bar class="bar-dark" >
      <h1 class="title">Map</h1>
    </ion-header-bar>
    <ion-content>
      <div id="map" data-tap-disabled="true"></div>
    </ion-content>
    <ion-footer-bar class="bar-dark">
      <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
    </ion-footer-bar>
<script>
angular.module('ionic.example', ['ionic'])

.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
        });
        */
        
        $ionicLoading.show()

navigator.geolocation.getCurrentPosition(function(pos) {
          $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
          //$scope.loading.hide();
          $ionicLoading.hide();
        }, function(error) {
          alert('Unable to get location: ' + error.message);
        });
      };
      
      $scope.clickTest = function() {
        alert('Example of infowindow with ng-click')
      };
      
    });  
    </script>
  </body>
</html>

https://codepen.io/ionic/pens/public/

201706,20170602

Programming Steps

Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Friday, June 2, 2017

208 Ionic-v1 Google Maps Example: Nightly

No comments:

Post a Comment