Enhancing Your Map with Google Maps 3.54's New Style Features

Question

Enhancing Your Map with Google Maps 3.54's New Style Features

I am currently working on a project using Vue2 with version 3.54 of Google Maps, which is necessary for the advancedMarkers feature.

https://maps.googleapis.com/maps/api/js?key=${this.mapKey}&callback=isMapLoad&libraries=marker&v=3.54

I have gone through all the documentation on styling maps and have successfully styled maps in previous versions. However, I am facing difficulty in implementing it now.

I attempted to set a style during initialization:

this.map = new google.maps.Map(document.getElementById('map'), {
  mapId: 'GMAP_ID',
  language: this.$i18n.locale,
  center: this.defaultCoords,
  zoom: this.zoom,
  styles: [
  {
    featureType: 'water',
    elementType: 'all',
    stylers: [
     {
       color: '#f40000',
     },
     {
       visibility: 'on',
     },
    ],
  }
 ]
})

And also tried setting it after initialization:

const styledMapType = new google.maps.StyledMapType(
 [
  {
    featureType: 'water',
    elementType: 'all',
    stylers: [
     {
       color: '#f40000',
     },
     {
       visibility: 'on',
     },
    ],
  }
 ]
)
this.map.mapTypes.set('styled_map', styledMapType)
this.map.setMapTypeId('styled_map')

// Added libraries maps to script URL to enable StyledMapType

Despite not receiving any errors, no changes were reflected in both cases. What else can I try?

UPDATE

A functional example showcasing the issue can be found here: https://jsfiddle.net/981w4zxb/1/

If you remove the mapId as shown in the example, the style is applied, but the markers cease to function. On the other hand, adding the mapid displays advanced markers but does not apply the styles.

The goal is to incorporate both - utilizing advanced markers along with legacy styles without reliance on the cloud service.

javascript vue.js google-maps maps

Answer 1

Answer №1

Currently, there is no direct way to upload or import JSON from Google Map Console/Platform for custom styling of Google Maps.

However, you can achieve custom styles by incorporating code on your end. I have successfully implemented this approach in an Angular project.

Sample Code -

import { Loader } from '@googlemaps/js-api-loader';

ngOnInit(): void {
  const loader = new Loader({
    apiKey: API_KEY,
    version: 'weekly'
  });

  loader.importLibrary('maps').then(() => {
    void this.initMap();
  }).catch((error: Error) => {
    console.error(`Error loading Google Maps API: ${error.message}`);
  });
}

async initMap(): Promise <void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  const mapOptions = {
    zoom: 7,
    center: {
      lat: 22.5744,
      lng: 88.3629
    },
  };

  const map = new Map(document.getElementById('map'), mapOptions);

  const styledMapType = new google.maps.StyledMapType(
    [
      {
        featureType: 'water',
        elementType: 'all',
        stylers: [
          {
            color: '#f40000',
          },
          {
            visibility: 'on',
          },
        ],
      }
    ]
  );
  this.map.mapTypes.set('styled_map', styledMapType);
  this.map.setMapTypeId('styled_map');
}

Resultant Output -

https://i.sstatic.net/G8tNHHQE.png

Google maps package version details -

"@angular/core": "^17.2.0",
"@angular/google-maps": "^17.2.0",
"@googlemaps/js-api-loader": "^1.16.6",
"@googlemaps/markerclusterer": "^2.5.3",

Answer 2

Currently, there is no direct way to upload or import JSON from Google Map Console/Platform for custom styling of Google Maps.

However, you can achieve custom styles by incorporating code on your end. I have successfully implemented this approach in an Angular project.

Sample Code -

import { Loader } from '@googlemaps/js-api-loader';

ngOnInit(): void {
  const loader = new Loader({
    apiKey: API_KEY,
    version: 'weekly'
  });

  loader.importLibrary('maps').then(() => {
    void this.initMap();
  }).catch((error: Error) => {
    console.error(`Error loading Google Maps API: ${error.message}`);
  });
}

async initMap(): Promise <void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  const mapOptions = {
    zoom: 7,
    center: {
      lat: 22.5744,
      lng: 88.3629
    },
  };

  const map = new Map(document.getElementById('map'), mapOptions);

  const styledMapType = new google.maps.StyledMapType(
    [
      {
        featureType: 'water',
        elementType: 'all',
        stylers: [
          {
            color: '#f40000',
          },
          {
            visibility: 'on',
          },
        ],
      }
    ]
  );
  this.map.mapTypes.set('styled_map', styledMapType);
  this.map.setMapTypeId('styled_map');
}

Resultant Output -

https://i.sstatic.net/G8tNHHQE.png

Google maps package version details -

"@angular/core": "^17.2.0",
"@angular/google-maps": "^17.2.0",
"@googlemaps/js-api-loader": "^1.16.6",
"@googlemaps/markerclusterer": "^2.5.3",

Answer 3

Answer №2

Not entirely certain how this will work in Vue, but your code appears to be accurate – regardless of whether or not you include &v=3.54.

The crucial point here is that if you initialize your map with a mapId, the styles attribute within the constructor will not take precedence over the map's visual representation.

Therefore, if there are no cloud styles associated with your mapId, it is recommended to exclude it from the constructor. Your styles should then be applied immediately, along with the potential impact of this.map.setMapTypeId(...).

UPDATE

You cannot simultaneously use mapIds and apply custom styles. Combining these elements will trigger a warning message:

The styles property of a Map cannot be configured when a mapId is specified. If a mapId is present, styling must be managed via the Google Cloud Console. For more information, refer to the documentation at https://developers.google.com/maps/documentation/javascript/styling#cloud_tooling

Considering that your style definitions are stored in a database, it may be necessary to create individual mapIds along with their corresponding cloud styles…

Alternatively, you could reconsider your reliance on Advanced Markers. Check out this guide for exploring alternative approaches. Disclaimer: I authored the guide.

Lastly, it might be beneficial to monitor the progress of the gcloud cli, which could potentially offer functionality to programmatically generate mapIds and styles in the future -- similar to what Google has done for API Keys.

Answer 4

Not entirely certain how this will work in Vue, but your code appears to be accurate – regardless of whether or not you include &v=3.54.

The crucial point here is that if you initialize your map with a mapId, the styles attribute within the constructor will not take precedence over the map's visual representation.

Therefore, if there are no cloud styles associated with your mapId, it is recommended to exclude it from the constructor. Your styles should then be applied immediately, along with the potential impact of this.map.setMapTypeId(...).

UPDATE

You cannot simultaneously use mapIds and apply custom styles. Combining these elements will trigger a warning message:

The styles property of a Map cannot be configured when a mapId is specified. If a mapId is present, styling must be managed via the Google Cloud Console. For more information, refer to the documentation at https://developers.google.com/maps/documentation/javascript/styling#cloud_tooling

Considering that your style definitions are stored in a database, it may be necessary to create individual mapIds along with their corresponding cloud styles…

Alternatively, you could reconsider your reliance on Advanced Markers. Check out this guide for exploring alternative approaches. Disclaimer: I authored the guide.

Lastly, it might be beneficial to monitor the progress of the gcloud cli, which could potentially offer functionality to programmatically generate mapIds and styles in the future -- similar to what Google has done for API Keys.

Enhancing Your Map with Google Maps 3.54's New Style Features

Answer №1

Answer №2

Similar questions

Using JavaScript and React to determine the height of a dynamically generated section containing multiple div blocks

Create a new promise within a factory function

Discover the Primevue DataTable feature that enables dynamic column and column grouping functionality, with the added bonus of gridlines disappearing as you scroll down

Exploring Vue and Vuetify: How to iterate over an array of strings and execute each function within an object?

Form validation using jQuery and AJAX

Scrolling through four limited list items automatically

What is the best way to invoke a custom hook that returns a value within the useEffect hook?

Problem arises when attempting to switch between JQuery UI tabs by clicking a button

vue Passing data to a Vue component and retrieving the selected value

Receiving and transmitting messages repeatedly in Discord.JS

Elements added through d3 and jquery are not showing up in the SVG

Creating a complete webpage using HTML

Pass a notification to a separate function

Configuring the text box to utilize jQuery's datepicker feature

Modify AngularJS behavior to show or hide elements when the user hovers over them

The light slider feature is experiencing technical difficulties within the Bootstrap model

Using an array key within a file name

I'm interested in learning about the most efficient practices for handling JSON, performing math operations, and utilizing loops in JS/React. What techniques

Experiencing difficulty in removing a row from an HTML table using jQuery DataTables

When invoking the jQuery ".load('pageName')" method, HTML pages are not loaded from the application cache