CODEWITHSUNDEEP
javascripthtmlangularjsgoogle-mapsgoogle-maps-api-3
uksz
uksz

Reputation: 18719

Short delay in loading google maps style

So, I use Ionic Framework to create mobile app. I use AngularJS, and Google Maps API. Recently, I came across one annoying problem. Whenever the map loads, there is a short delay (but noticeable) in loading map style. Since my map style changes the map to black-and-white, this is problematic. It is visible both when I run app in my browser, as well as in my phone. What is the best way to solve this issue?

Here is my map:

var styledMap = new google.maps.StyledMapType(MAP_STYLE,{name: "Styled Map"});


var mapOptions = {
  center: { lat: Map.getMapPosition().k, lng: Map.getMapPosition().D },
  zoom: 13,
  maxZoom: 18,
  minZoom: 13,
  zoomControl: true,
  draggable: true,
  disableDoubleClickZoom: true,
  disableDefaultUI: true,
  mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
  }
};


MY.map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
MY.map.mapTypes.set('map_style', styledMap);
MY.map.setMapTypeId('map_style');

And map_style below:

.constant('MAP_STYLE', [
{
"featureType": "landscape",
"stylers": [
  {
    "saturation": -100
  },
  {
    "lightness": 65
  },
  {
    "visibility": "on"
  }
]},    
{
"featureType": "poi",
"stylers": [
  {
    "saturation": -100
  },
  {
    "lightness": 51
  },
  {
    "visibility": "simplified"
  }
]},    
{
"featureType": "road.highway",
"stylers": [
  {
    "saturation": -100
  },
  {
    "visibility": "simplified"
  }
]},
{
"featureType": "road.arterial",
"stylers": [
  {
    "saturation": -100
  },
  {
    "lightness": 30
  },
  {
    "visibility": "on"
  }
]},    
  {"featureType": "road.local",
"stylers": [
  {
    "saturation": -100
  },
  {
    "lightness": 40
  },
  {
    "visibility": "on"
  }
]},
   {"featureType": "transit",
"stylers": [
  {
    "saturation": -100
  },
  {
    "visibility": "simplified"
  }
]},
{"featureType": "administrative.province",
"stylers": [
  {
    "visibility": "off"
  }]},    
{"featureType": "water",
"elementType": "labels",
"stylers": [
  {
    "visibility": "on"
  },
  {
    "lightness": -25
  },
  {
    "saturation": -100
  }
]},
  {
"featureType": "water",
"elementType": "geometry",
"stylers": [
  {
    "hue": "#ffff00"
  },
  {
    "lightness": -25
  },
  {
    "saturation": -97
  }
]}])

I am adding JSFiddle with similar code (not exact because the project is really big, however the map part is exactly the same).

http://jsfiddle.net/jboaj8zn/

Nevertheless, the problem is not observable on the JSFiddle. When I run my app on localhost and on phone, I can see it.

Upvotes: 1

Views: 1344

Answers (1)

scniro
scniro

Reputation: 16989

What appears to be going on here, is the map itself is rendering before you can complete your styling. Upon initial observation, I guessed throttling on mobile devices could be to blame. You mentioned you can't observe this in the fiddle, but injecting $timeout and crafting the following, you can simulate a delay- showing the original map => delay => styled map. Why this would happen? Unsure, could be a few factors.

$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

$timeout(function() { 
    $scope.map.mapTypes.set('map_style', styledMap);            
    $scope.map.setMapTypeId('map_style');
}, 1000);

View Delayed example - JSFiddle Link

However, going through the docs and observing this a bit closer, it appears you could be initializing your map a better way. Playing around with this, I've set the map style immediately when defining $scope.map, which should alleviate any processing delays occurring before your custom styling.

It appears, you were crafting a map, then newing up a re-styled one- not taking the opportunity to style the original immediately. Why not do so up front?

You can replace previous logic with the following

var mapOptions = {
    zoom: 4,
    styles: MAP_STYLE, // <---- set style here!
    center: new google.maps.LatLng(40.0000, -98.0000),
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
}

$scope.map = new google.maps.Map(document.getElementById('map'));

$scope.map.setOptions(mapOptions);

// -- var styledMap = new google.maps.StyledMapType(MAP_STYLE, {name: "Styled Map"});

// -- $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

Even with the included $timeout delay such as in the first example, creating our map this way will always get the correct style the first time.

Working JSFiddle Link

Upvotes: 1

Related Questions