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!
What about this function, did you try it out ?
new google.maps.StyledMapType([])
Which library are you using for Google maps?
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 }
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
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.
I have no problem with the JS API, I need the Native solution.
Thanks, looks very good! But I need the Native solution, this one is for the JavaScript API setup as far as I can tell.
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
});
}where to add this code?
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")
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());
});
});
}
});
});
}
};
}]);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.
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();
})
}
`
Read document