Ionic Google Map Example in ng-view

ionic-v1
1

Hello

I have implemeted geolocations and dynamically added location marks by getting data from server. It is runny correclty when I put the <div id="map"></div> in index.html. But when I tried it using ng-view its not loading the map and no error is there in console also.

function initialize() {

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

// Get Geolocation
var city_name;
navigator.geolocation.getCurrentPosition(function(pos) {
  $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
  //$scope.loading.hide();
  
  var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
  var geocoder;
  geocoder = new google.maps.Geocoder();
		geocoder.geocode({'latLng': latlng}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				if (results[1]) {
					for (var i=0; i<results[0].address_components.length; i++) {
					 	for (var b=0;b<results[0].address_components[i].types.length;b++) {
					  	if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
					        city= results[0].address_components[i];
					        break;
					    }
					  }
					}
				console.log(city.long_name)
				city_name = city.long_name;
	    	} else {
    		console.log("No results found");
  		}
		} else {
  		console.log("Geocoder failed due to: " + status);
		}
  });
}, function(error) {
  alert('Unable to get location: ' + error.message);
});

// Initialize Map
var mapOptions = {
  center: new google.maps.LatLng(43.07493,-89.381388),
  zoom: 16,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
    mapOptions);
    
// Get Data for marker from http(json) for markers
			var getProduct = "http://www.test.com/"; //dumy domain
			$http({method: 'GET', url: getProduct}).success(function(data)
			{	
				$scope.products = data.products;
				console.log(data.products.length);
				
				var marker, i;
				for (i = 0; i < data.products.length; i++) {  
					marker = new google.maps.Marker({
					  position: new google.maps.LatLng(data.products[i].latitude, data.products[i].longitude),
					  map: map
					});

					google.maps.event.addListener(marker, 'click', (function(marker, i) {
					  return function() {
					    infowindow.setContent(locations[i][0]);
					    infowindow.open(map, marker);
					  }
					})(marker, i));
				}
	  		marker.setMap(map);
	  	});

// Stop the side bar from dragging when mousedown/tapdown on the map
google.maps.event.addDomListener(document.getElementById('map'), 'mousedown', function(e) {
  e.preventDefault();
  return false;
});
$scope.map = map;  
} 
google.maps.event.addDomListener(window, 'load', initialize);

Main problem mine is that I am not able to load the map in ng-view
This example runs well till I switch to ng-view.
https://github.com/driftyco/ionic/tree/master/examples/starters/map

Thanks
Gaurav

2

It sounds like the same issue in here, mind trying this and seeing if it works better for you? Using angular-google-maps inside side-menus

3

Thanks @max for replying. It did not seems to solve my problem. As the solution you gave in this discussion is using angular-google-maps but the example given here ( https://github.com/driftyco/ionic/tree/master/examples/starters/map ) did not include this plugin.

Also, I did not like using extra underscore.js and angular-google-maps.js directive. I think I might be missing something, just problem is the initializing the initialize method. Is there any tutorial which uses the same example given in ionic starters example using <ng-view>.

Thanks
Gaurav

4

Have You managed to fix the problem? The same here

5

In your index do you have both a nav-view and a ui-view? I found nav-vew in index with ion-view in my template worked as my map was hiding under one of the views. (essentially there were 2 identical views on top of one another, where googlemaps found the id of the underlying code and not the currently presented code)

my map.html template:

<ion-view style="background: transparent;">
  <ion-content id="map" data-ng-controller="mapCtrl"></ion-content>
</ion-view>

my index.html template that was from the starter app, commented out ui-view:

<script src="https://maps.googleapis.com/maps/api/js?key>
...<body>
<ion-nav-view></ion-nav-view>
<!--//<ion-ui-view></ion-ui-view>//-->
</body>...

Then the only thing I changed in a working google map code was map=map to $scope.map = map in my ctrl.

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(0,0),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);
    $scope.map = map;
  }
google.maps.event.addDomListener(window, 'load', initialize);  initialize();
6 Likes
6

I tried to adapt your fix to my map; I still can’t get it to display. It works locally on the browser, but building and uploading to my Android device it simply will not show the map.

7

@guyz Thank you so much!! Your solution is the only that works for me…awesome!!

8

Thanks @guyz! I had been stuck on this for days, your suggestion did the trick!

9

thank to @guyz ,

In this repository : https://github.com/driftyco/ionic-starter-maps
=> this example works very well but to make it work with ng-view :

In directives.js with .directive('map', function() {... :

I replace this : google.maps.event.addDomListener(window, 'load', initialize);

by this : google.maps.event.addDomListener(window, 'load', initialize);``initialize();

Sometimes, we are too lazy to read slowly … grrr … :wink:

10

I worked and solved my problem thanks :slight_smile: