Styling my Google Map

[Case]

Trying to style my Google Map component to match my app.
I've been reading and following the Google Map API here:

https://developers.google.com/maps/do...

But it is unclear where I should apply this code. Should I add it as a custom javascript and call it on a page show event?

[Kateryna Grynko]

Hi Case,

Yes, you understand correctly.

Call function codeinitialize/code ( https://developers.google.com/maps/do...) on Page Show event and replace codemap-canvas/code to codescreenName_mapName/code

Where 'screenName' is a page name,
'mapName' is a map component name.

[Case]

Thanks Katya, I can get this displaying but have a couple questions:

1) It is only displayed if I transition to the map page from another. I understand this is due to the 'page show' event, and shouldn't be an issue for my normal app flow but is there a way I can test it when I set default app page to the map page? (load event didnt work)

2) The map styling is interfering with my geolocation service. I'm thinking this has to do with the initialize function setting a zoom and center in its settings but if I remove them then no map is displayed at all.

Or is there an issue with me basically initializing two maps with the same name? One that I have drag/dropped into the editor and the other from the initialize on page show?

[Igor]

Hi,

1 Page show event fires every time you have visited a page.

It could be that there is some error with attach this event handler to your JS.

Please show us screen shots how do you use it event and call certain functions.

2 You don't need to create new map.

You have to stylize existing map instead of create in new one.

There is simple solution for your.

Please follow these steps to get it work correctly:

1 On pageShow javascript event handler paste following code:

precode
//Where "googlemap_6" is gmap component name.
initMapStyles("googlemap_6");
/code
/pre
2 Open your js asset (with initialize function). Delete initialize function at all. And fill this asset with following code:

precode
function initMapStyles(mapName) {

Code: Select all

 // Create an array of styles. 
 var styles = [{ 
     stylers: [{ 
         hue: "#00ffe6" 
     }, { 
         saturation: -20 
     }] 
 }, { 
     featureType: "road", 
     elementType: "geometry", 
     stylers: [{ 
         lightness: 100 
     }, { 
         visibility: "simplified" 
     }] 
 }, { 
     featureType: "road", 
     elementType: "labels", 
     stylers: [{ 
         visibility: "off" 
     }] 
 }]; 

 // Create a new StyledMapType object, passing it the array of styles, 
 // as well as the name to be displayed on the map type control. 
 var styledMap = new google.maps.StyledMapType(styles, { 
     name: "Styled Map" 
 }); 

 var map = Appery("googlemap_6").options.mapElement.gmap('get', 'map'); 

 map.mapTypes.set('map_style', styledMap); 
 map.setMapTypeId('map_style'); 

};
/code/pre

Now you can work with this google maps component as earlier (without styles).

[Case]

Thanks Igor, that's exactly the function I was looking for. Very clear and much appreciated!