Styling Google Maps


#1

Does anyone know how I can use this to style my Google Maps?
https://mapstyle.withgoogle.com/

It generates a JSON file, but I can’t find the equivalent of GoogleMap.setMapStyle() in GoogleMap() class in ionic native.

Any help will be highly appreciated!


#2

What about this function, did you try it out ?
new google.maps.StyledMapType([])

Which library are you using for Google maps?


#3

i use this:

note this is not for the native map implementation.

let mapOptions = { center: latLng, zoom: 12, mapTypeId: google.maps.MapTypeId.TERRAIN, styles: this.mapStyle, clickableIcons: false, disableDefaultUI: true, zoomControl: true, zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER }


#4

And then you are passing this variable to new google.maps.Map(document.getElementById('map'), {options}) right?
If that’s the case, try to set your style to the map after you initialize it like this:

let mapOptions = {
    center: latLng,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.TERRAIN, 
    styles: this.mapStyle,
    clickableIcons: false,
    disableDefaultUI: true,
    zoomControl: true,
    zoomControlOptions: {
    position: google.maps.ControlPosition.RIGHT_CENTER
}

var map = new google.maps.Map(document.getElementById('map'), mapOptions});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');

Refrence: https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple


#5

I’m using the Native Ionic libary (http://ionicframework.com/docs/v2/native/google-maps/)
So this function won’t work, as far as I recall, this is from the JS API.


#6

I have no problem with the JS API, I need the Native solution.


#7

Thanks, looks very good! But I need the Native solution, this one is for the JavaScript API setup as far as I can tell.


#8

Here is the simple solution!!!

let styles = JSON you get from https://mapstyle.withgoogle.com/

this.map = new GoogleMap(map, {
          'backgroundColor': 'white',
          'controls': {
          },
          'gestures': {
          },
          'camera': {
          },
          'styles': styles  <=THIS IS ALL
        });
      }

#9

where to add this code?


#10

You add is in the exact same place where you instantiate your Google Map. Where you do this:

new GoogleMap(Here are your parameters, and your " 'styles': styles")


#11

I am using google map component in ionic creator. Below is the controller code.
i tried updating map options with style array but it didnot work.
$scope.map.options = stylesArray;

The map is still loading in default state and I see this message at console…
DevTools failed to parse SourceMap: https://creator.ionic.io/app/designer/angular-google-maps-street-view_dev_mapped.min.js.map

----------code -------
angular.module('googlemaps.init', ['uiGmapgoogle-maps'])

.config(['uiGmapGoogleMapApiProvider', function(uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        key: 'xxxxxxxxxxxxxxxxxxx',
        libraries: 'weather,geometry,visualization'
    });
}])

.directive('creatorMapComponent', ['uiGmapGoogleMapApi', '$timeout',

    /*
        Do not remove this directive, it is what powers the Creator Drag & Drop Component.
    */

    function(uiGmapGoogleMapApi, $timeout) {

        return {
            restrict: 'E',
            scope: true,
            link: function($scope, $element, $attr, _c, transclude) {
            
                $scope.map = {};
                
                if ($attr.marker=="true"){
                    $scope.map.marker = {
                        id: 0
                    }
                }
                
                $attr.$observe('location', function(val){
                    
                    uiGmapGoogleMapApi.then(function(maps){

                        function setupMap(lat, lng){
                            
                            $scope.map.zoom = parseInt($attr.zoom);
                            $timeout(function(){
                                $scope.map.center = {
                                    latitude: lat,
                                    longitude: lng
                                };  
                            });
                            $scope.map.options = JSON.parse($attr.options);
                            
                            if ($attr.marker=="true"){
                                $scope.map.marker.coords = {
                                    latitude: lat,
                                    longitude: lng
                                }
                            }
                        }

                        if (val.indexOf('"latitude"') > -1){
                            val = JSON.parse(val);
                            setupMap(val.latitude, val.longitude);
                        }else{
                            var geocoder = new maps.Geocoder();
                            geocoder.geocode({'address' : val}, function(results, status){
                                
                                $scope.$apply(function(){
                                    setupMap(results[0].geometry.location.lat(), results[0].geometry.location.lng());
                                });
            
                            });
                        }
                    });
                            
                });
            
            }
      
        };
}]);

#12

You’re using Ionic 1, but Ionic 2. This is done with Ionic 2. I gave us with Ionic 1 early into getting to know it, when I started with Creator, and never looked back. With my none existent experience as a programmer (2 months) I can say for sure Ionic 2 is way easier.

Sorry that I couldn’t help… but maybe try posting as an Ionic 1 string.


#13

hi dimitri
i’m using native google maps … i generated my chosen style
where to put my style code
my code
`
loadMap() {
let element : HTMLElement = document.getElementById(‘map’);
let map : GoogleMap = GoogleMaps.create(element );

map.one(GoogleMapsEvent.MAP_READY).then(
  ()=>{
    console.log('map')
  }
)
let ionic: LatLng = new LatLng(30.068544, 31.349004);

let position: CameraPosition <any> = {
  target: ionic,
    zoom: 18,
    tilt: 30
  };
  map.moveCamera(position);
  let MarkerOptions : MarkerOptions = {
    position : ionic ,
    title : 'anspire'
  };
  map.addMarker(MarkerOptions).then((marker : Marker) => {
    marker.showInfoWindow();
  })

}
`


#14

Read document