¿Cómo cambio Oceania por Australia en Google Maps?

Answer

1. 

   davy.ai

   August 5, 2023 at 11:31 pm

   Sí, hay una forma de cambiar la etiqueta que aparece cuando el mapa está totalmente alejado. Puede personalizar el estilo del mapa utilizando la API de JavaScript de Google Maps.

   1. Para comenzar, vaya a la Consola de Google Cloud y cree un nuevo proyecto si aún no lo ha hecho.
   2. Habilite la API de JavaScript de Google Maps para su proyecto y genere una clave de API.
   3. En su aplicación Angular, instale el paquete @types/googlemaps para obtener definiciones de tipos y autocompletado para la API de Google Maps.
   4. Cree un nuevo archivo llamado map-style.json y agregue el siguiente código:

   [
     {
       "featureType": "administrative.country",
       "elementType": "geometry.stroke",
       "stylers": [
         {
           "visibility": "on"
         },
         {
           "color": "#ffffff"
         },
         {
           "weight": 1
         }
       ]
     },
     {
       "featureType": "administrative.country",
       "elementType": "labels.text.fill",
       "stylers": [
         {
           "color": "#ffffff"
         }
       ]
     },
     {
       "featureType": "administrative.country",
       "elementType": "labels.text.stroke",
       "stylers": [
         {
           "color": "#000000"
         },
         {
           "weight": 4
         }
       ]
     },
     {
       "featureType": "administrative.country",
       "elementType": "labels",
       "stylers": [
         {
           "visibility": "on"
         }
       ]
     },
     {
       "featureType": "administrative.country",
       "elementType": "geometry.fill",
       "stylers": [
         {
           "color": "#ff0000"
         }
       ]
     }
   ]
   

   Este es un ejemplo de estilo de mapa que puede usar como punto de partida. Se dirige al tipo de característica administrative.country, que incluye los límites y etiquetas de los países.

   1. En su componente Angular donde está utilizando el mapa, agregue el siguiente código para cargar el estilo de mapa personalizado:

   import { Component, OnInit } from '@angular/core';
   import { MapsAPILoader } from '@agm/core';
   
   @Component({
     selector: 'app-map',
     templateUrl: './map.component.html',
     styleUrls: ['./map.component.css']
   })
   export class MapComponent implements OnInit {
   
     constructor(
       private mapsAPILoader: MapsAPILoader
     ) { }
   
     ngOnInit() {
       this.mapsAPILoader.load().then(() => {
         const map = new google.maps.Map(document.getElementById('map'), {
           center: {lat: -25.2744, lng: 133.7751},
           zoom: 5,
           styles: [
             {
               featureType: 'administrative.country',
               elementType: 'labels',
               stylers: [{ visibility: 'on' }]
             },
             {
               featureType: 'administrative.country',
               elementType: 'labels.text.fill',
               stylers: [{ color: '#000' }]
             },
             ... // añada su estilo de mapa personalizado aquí
           ]
         });
       });
     }
   }
   

   Este código utiliza el servicio MapsAPILoader de la biblioteca @agm/core para cargar de forma asíncrona la API de Google Maps. Dentro de la devolución de llamada load(), se crea una nueva instancia de mapa con una matriz de styles personalizados.

   1. Personalice la matriz de styles para incluir su propio estilo de mapa, basado en el archivo map-style.json de ejemplo. Puede utilizar el Generador de Estilos de Google Maps para generar un estilo de mapa personalizado y luego copiar y pegar el JSON en su matriz de styles.

   2. Guarde y vuelva a cargar su aplicación para ver el estilo de mapa actualizado. Cuando se aleje completamente, debería ver su etiqueta personalizada para Australia.

Comments are closed.