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

Geolocation with angular-google-maps

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

Google Maps : How to put blue dot (and circle) marker with arrow for the current position like Google Map App?

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.

Google Maps Height Problem

@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: