Veri Katmanı

Platform seçin: Android iOS JavaScript

Google Haritalar Veri katmanı, rastgele coğrafi veriler için bir kapsayıcı sağlar. Özel verilerinizi depolamak veya GeoJSON verilerini bir Google Haritası'nda göstermek için veri katmanını kullanabilirsiniz.

Genel Bakış

Veri katmanı hakkında daha fazla bilgi edinmek için bu DevBytes videosunu izleyin.

Maps JavaScript API ile bir haritayı işaretçiler, çoklu çizgiler, poligonlar vb. gibi çeşitli yer paylaşımlarıyla işaretleyebilirsiniz. Bu ek açıklamaların her biri stil bilgileriyle konum verilerini birleştirir. google.maps.Data sınıfı, rastgele coğrafi veriler için bir kapsayıcıdır. Bu yer paylaşımlarını eklemek yerine, haritanıza rastgele coğrafi veriler eklemek için veri katmanını kullanabilirsiniz. Bu veriler nokta, çizgi veya çokgen gibi geometriler içeriyorsa API bunları varsayılan olarak işaretçi, çoklu çizgi ve çokgen şeklinde oluşturur. Bu özellikleri normal bir yer paylaşımı gibi stilize edebilir veya veri kümenizde bulunan diğer özelliklere göre stil kuralları uygulayabilirsiniz.

google.maps.Data sınıfı sayesinde:

  • Haritanızda poligonlar çizin.
  • Haritanıza GeoJSON verileri ekleyin.
    GeoJSON, internetteki coğrafi veriler için bir standarttır. Data sınıfı, veri gösteriminde GeoJSON'un yapısını izler ve GeoJSON verilerinin gösterilmesini kolaylaştırır. loadGeoJson() yöntemini kullanarak GeoJSON verilerini kolayca içe aktarabilir ve noktaları, çizgi dizilerini ve poligonları görüntüleyebilirsiniz.
  • İstediğiniz verileri modellemek için google.maps.Data simgesini kullanın.
    Gerçek dünyadaki çoğu öğeyle ilişkili başka özellikler vardır. Örneğin, mağazaların açılış saatleri, yolların trafik hızı ve her Girl Guide grubunun kurabiye satışı yaptığı bir bölge vardır. google.maps.Data ile bu özellikleri modelleyebilir ve verilerinizi buna göre şekillendirebilirsiniz.
  • Verilerinizin nasıl gösterileceğini seçin ve fikrinizi anında değiştirin.
    Veri katmanı, verilerinizin görselleştirilmesi ve etkileşimi hakkında kararlar almanıza olanak tanır. Örneğin, marketlerin haritasına bakarken yalnızca toplu taşıma bileti satan marketleri göstermeyi seçebilirsiniz.

Poligon çizme

Data.Polygon sınıfı, poligon sarmayı sizin için işler. Enlem/boylam koordinatları olarak tanımlanan bir veya daha fazla doğrusal halka dizisi iletebilirsiniz. İlk doğrusal halka, poligonun dış sınırını tanımlar. Birden fazla doğrusal halka iletirseniz ikinci ve sonraki doğrusal halkalar, çokgendeki iç yolları (delikler) tanımlamak için kullanılır.

Aşağıdaki örnekte, içinde iki delik bulunan dikdörtgen bir poligon oluşturuluyor:

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;

GeoJSON yükleme

GeoJSON, internette coğrafi verileri paylaşmak için kullanılan yaygın bir standarttır. Hafif ve kolayca okunabilir olduğundan paylaşım ve ortak çalışma için idealdir. Veri katmanı ile GeoJSON verilerini tek bir kod satırıyla Google Harita'ya ekleyebilirsiniz.

map.data.loadGeoJson('google.json');

Her haritada, GeoJSON dahil olmak üzere rastgele coğrafi veriler için veri katmanı görevi gören bir map.data nesnesi bulunur. loadGeoJSON() nesnesinin data yöntemini çağırarak bir GeoJSON dosyasını yükleyip görüntüleyebilirsiniz. Aşağıdaki örnekte, harita ekleme ve harici GeoJSON verilerini yükleme işlemi gösterilmektedir.

TypeScript

async function init() {
    await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map')!;

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson('google.json');
}

void init();

JavaScript

async function init() {
    await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson('google.json');
}

void init();
Örneği görüntüleyin

Örnek GeoJSON

Bu sayfadaki örneklerin çoğunda ortak bir GeoJSON dosyası kullanılır. Bu dosya, "Google" kelimesindeki altı karakteri Avustralya üzerinde çokgenler olarak tanımlar. Veri katmanını test ederken bu dosyayı kopyalayabilir veya değiştirebilirsiniz.

Not: Başka bir alan adından JSON dosyası yüklemek için bu alan adında kaynaklar arası kaynak paylaşımı etkinleştirilmiş olmalıdır.

Dosyanın tam metnini, google.json kelimelerinin yanındaki küçük oku genişleterek aşağıda görebilirsiniz.

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

GeoJSON verilerini stilize etme

Verilerinizin nasıl görünmesi gerektiğini belirtmek için Data.setStyle() yöntemini kullanın. setStyle() yöntemi, bir StyleOptions nesne değişmez değeri veya her bir özelliğin stilini hesaplayan bir işlev alır.

Basit stil kuralları

Özellikleri stilendirmenin en basit yolu, StyleOptions nesne değişmez değerini setStyle() öğesine iletmektir. Bu işlem, koleksiyonunuzdaki her özellik için tek bir stil ayarlar. Her özellik türünün, mevcut seçeneklerin yalnızca bir alt kümesini oluşturabildiğini unutmayın. Bu nedenle, farklı özellik türlerinin stillerini tek bir nesne değişmez değerinde birleştirmek mümkündür. Örneğin, aşağıdaki snippet hem yalnızca nokta geometrilerini etkileyen özel bir icon hem de yalnızca poligonları etkileyen fillColor ayarlar.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Geçerli stil/özellik kombinasyonları hakkında daha fazla bilgiyi Stil Seçenekleri bölümünde bulabilirsiniz.

Aşağıda, StyleOptions nesne değişmez değeri kullanılarak birkaç özelliğin kontur ve dolgu renginin ayarlanmasıyla ilgili bir örnek verilmiştir. Her poligonun aynı şekilde stilize edildiğini fark edin.

TypeScript

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map')!;

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson('google.json');
    });

    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1,
    });
}

void init();

JavaScript

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map');

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson('google.json');
    });

    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1,
    });
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML

<html>
    <head>
        <title>Data Layer: Styling</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="-28,137" zoom="4"></gmp-map>
    </body>
</html>
Örneği görüntüleyin

Bildirimli stil kuralları

İşaretçiler veya çoklu çizgiler gibi çok sayıda yer paylaşımının stilini güncellemek istiyorsanız genellikle haritanızdaki her yer paylaşımını tek tek inceleyip stilini ayrı ayrı ayarlamanız gerekir. Veri katmanı sayesinde kuralları bildirimsel olarak ayarlayabilir ve bu kurallar veri kümenizin tamamına uygulanır. Veriler veya kurallar güncellendiğinde stil, her özelliğe otomatik olarak uygulanır. Stilini özelleştirmek için özellik özelliklerini kullanabilirsiniz.

Örneğin, aşağıdaki kod, google.json içindeki her karakterin rengini, ASCII karakter setindeki konumunu inceleyerek ayarlar. Bu örnekte, karakter konumunu verilerimizle birlikte kodladık.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Stilleri kaldırma

Uygulanan stilleri kaldırmak istiyorsanız setStyles() yöntemine boş bir nesne değişmez değeri iletin.

// Remove custom styles.
map.data.setStyle({});

Bu işlem, belirttiğiniz tüm özel stilleri kaldırır ve özellikler varsayılan stiller kullanılarak oluşturulur. Bunun yerine özellikleri artık oluşturmak istemiyorsanız StyleOptions özelliğinin visible özelliğini false olarak ayarlayın.

// Hide the Data layer.
map.data.setStyle({visible: false});

Varsayılan stilleri geçersiz kılma

Stil kuralları genellikle veri katmanındaki her özelliğe uygulanır. Ancak bazen belirli özelliklere özel stil kuralları uygulamak isteyebilirsiniz. Örneğin, tıklama sırasında bir özelliği vurgulamak için.

Özel stil kuralları uygulamak için overrideStyle() yöntemini kullanın. overrideStyle() yöntemiyle değiştirdiğiniz tüm özellikler, setStyle() içinde belirtilen genel stillere ek olarak uygulanır. Örneğin, aşağıdaki kod, tıklama sırasında bir poligonun dolgu rengini değiştirir ancak başka stil ayarlamaz.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

Tüm stil geçersiz kılmalarını kaldırmak için revertStyle() yöntemini çağırın.

Stil seçenekleri

Her bir özelliği stilize etmek için kullanabileceğiniz seçenekler, özellik türüne bağlıdır. Örneğin, fillColor yalnızca poligon geometrilerde oluşturulurken icon yalnızca nokta geometrisinde görünür. Daha fazla bilgi için StyleOptions ile ilgili referans belgelerine bakın.

Tüm geometrilerde kullanılabilir

  • clickable: true ise özellik, fare ve dokunma etkinliklerini alır.
  • visible: true ise özellik görünür.
  • zIndex: Tüm özellikler, zIndex sırasına göre haritada gösterilir. Daha yüksek değerler, daha düşük değerlere sahip özelliklerin önünde gösterilir. İşaretçiler her zaman çizgi dizilerinin ve poligonların önünde gösterilir.

Nokta geometrilerinde kullanılabilir

  • cursor: Fareyle üzerine gelindiğinde gösterilecek fare imleci.
  • icon: Nokta geometrisi için gösterilecek simge.
  • shape: Tıklama algılama için kullanılan resim haritasını tanımlar.
  • title: Fareyle üzerine gelindiğinde gösterilen metin.

Çizgi geometrilerinde kullanılabilir

  • strokeColor: Çizgi rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.
  • strokeOpacity: Kontur opaklığı 0,0 ile 1,0 arasındadır.
  • strokeWeight: Piksel cinsinden kontur genişliği.

Poligon geometrilerde kullanılabilir

  • fillColor: Dolgu rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.
  • fillOpacity: 0.0 ile 1.0. arasındaki dolgu opaklığı
  • strokeColor: Çizgi rengi. Genişletilmiş adlandırılmış renkler hariç tüm CSS3 renkleri desteklenir.
  • strokeOpacity: Kontur opaklığı 0,0 ile 1,0 arasındadır.
  • strokeWeight: Piksel cinsinden kontur genişliği.

Etkinlik işleyicileri ekleme

Özellikler, mouseup veya mousedown gibi etkinliklere yanıt verir. Kullanıcıların haritadaki verilerle etkileşim kurmasına izin vermek için etkinlik işleyicileri ekleyebilirsiniz. Aşağıdaki örnekte, fare imlecinin altındaki özellik hakkında bilgi gösteren bir imleçle üzerine gelme etkinliği ekliyoruz.

// Set mouseover event for each feature.
innerMap.data.addListener('mouseover', (event) => {
    document.getElementById('info-box').textContent =
        event.feature.getProperty('letter');
});

Veri katmanı etkinlikleri

Aşağıdaki etkinlikler, geometri türünden bağımsız olarak tüm özelliklerde ortaktır:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Bu etkinlikler hakkında daha fazla bilgiyi google.maps.data sınıfının referans belgelerinde bulabilirsiniz.

Görünümü dinamik olarak değiştirme

Her özelliğin stilini hesaplayan bir işlevi google.maps.data.setStyle() yöntemine ileterek veri katmanının stilini ayarlayabilirsiniz. Bu işlev, bir özelliğin özellikleri her güncellendiğinde çağrılır.

Aşağıdaki örnekte, özelliğin isColorful özelliğini güncelleyen click etkinliği için bir etkinlik işleyici ekliyoruz. Mülk ayarlandığı anda değişikliği yansıtacak şekilde özellik stili güncellenir.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});