Page 1 of 1

How to use the Styles ?

PostPosted: 30 Jan 2018 09:49
by c.schwoerer
Hi all,
I need some help how I can use use the map styles.

I need custom colors on the google map.
In the Google API I can use the styles in map options. like this:

Code: Select all
  // Nightview Style!

  'var myOptions = {'+
  '    zoom: '+IntToStr(Geo.InitialMapZoom)+','+
  '    center: latlng,'+
  '    mapTypeId: google.maps.MapTypeId.ROADMAP,'+


  '    styles: ['+
            '{elementType: "geometry", stylers: [{color: "#101010"}]},'+
            '{elementType: "labels.text.stroke", stylers: [{color: "#242f3e"}]},'+
            '{elementType: "labels.text.fill", stylers: [{color: "#746855"}]},'+
            '{featureType: "administrative.locality",elementType: "labels.text.fill",stylers: [{color: "#d59563"}]},'+
            '{featureType: "poi",elementType: "labels.text.fill",stylers: [{color: "#d59563"}]},'+
            '{featureType: "poi.park",elementType: "geometry",stylers: [{color: "#263c3f"}]},'+
            '{featureType: "poi.park",elementType: "labels.text.fill",stylers: [{color: "#6b9a76"}]},'+
            '{featureType: "road",elementType: "geometry",stylers: [{color: "#38414e"}]},'+
            '{featureType: "road",elementType: "geometry.stroke",stylers: [{color: "#212a37"}]},'+
            '{featureType: "road",elementType: "labels.text.fill",stylers: [{color: "#9ca5b3"}]},'+
            '{featureType: "road.highway",elementType: "geometry",stylers: [{color: "#746855"}]},'+
            '{featureType: "road.highway",elementType: "geometry.stroke",stylers: [{color: "#1f2835"}]},'+
            '{featureType: "road.highway",elementType: "labels.text.fill",stylers: [{color: "#f3d19c"}]},'+
            '{featureType: "transit",elementType: "geometry",stylers: [{color: "#2f3948"}]},'+
            '{featureType: "transit.station",elementType: "labels.text.fill",stylers: [{color: "#d59563"}]},'+
            '{featureType: "water",elementType: "geometry",stylers: [{color: "#000000"}]},'+
            '{featureType: "water",elementType: "labels.text.fill",stylers: [{color: "#515c6d"}]},'+
            '{featureType: "water",elementType: "labels.text.stroke",stylers: [{color: "#17263c"}]}'+
            ']'+
  '    };'+

  // Create the map...
  '  map = new google.maps.Map(document.getElementById("'+Geo.HTMLElementId+'"),myOptions);'+



This work fine.

I even tried this with the "map" object without success:

Code: Select all
           
with IWCGJQGMap3.JQGMapV3Options do
  begin
       
    Map.Options.Styles.Add('{elementType: "geometry", stylers: [{color: "#101010"}]}');
    Map.Options.Styles.Add('{elementType: "labels.text.stroke", stylers: [{color: "#242f3e"}]}');
.....

How is the right way?

Thanks your your help?

Re: How to use the Styles ?

PostPosted: 31 Jan 2018 11:01
by Alexander Bulei
Hello,

Please check the attached demo..

Best Regards.

Re: How to use the Styles ?

PostPosted: 01 Feb 2018 09:14
by c.schwoerer
Thank you ;)
Great Job!

Re: How to use the Styles ?

PostPosted: 01 Feb 2018 11:23
by Alexander Bulei
Hi c.schwoerer ,

Thank you ;)
Great Job!


;)

Best Regards.