Ionic Google Map Example in ng-view


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 = ${
  //content: 'Getting current location...',
  //showBackdrop: false

// Get Geolocation
var city_name;
navigator.geolocation.getCurrentPosition(function(pos) {
  $ google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
  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];
				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"),
// Get Data for marker from http(json) for markers
			var getProduct = ""; //dumy domain
			$http({method: 'GET', url: getProduct}).success(function(data)
				$scope.products = data.products;
				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]);, marker);
					})(marker, i));

// Stop the side bar from dragging when mousedown/tapdown on the map
google.maps.event.addDomListener(document.getElementById('map'), 'mousedown', function(e) {
  return false;
$ = 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.


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

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 ( ) 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>.


Have You managed to fix the problem? The same here

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>

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

<script src=">

Then the only thing I changed in a working google map code was map=map to $ = 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"),
    $ = map;
google.maps.event.addDomListener(window, 'load', initialize);  initialize();  

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.

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

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

thank to @guyz ,

In this repository :
=> 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:

I worked and solved my problem thanks :slight_smile: