Web sayfasına Google Haritası ekleme

HTML, CSS ve JavaScript kodu kullanarak web sayfalarına Google Haritalar haritası ekleyebilirsiniz. Bu sayfada, bir web sayfasına nasıl harita ekleneceği ve ardından harita örneğine programatik olarak nasıl erişileceği gösterilmektedir.

• gmp-map öğesini kullanarak harita ekleme
• div öğesi ve JavaScript kullanarak harita ekleme
• Harita örneğinde özellikleri ayarlama ve alma

Genel Bakış

Bir haritayı yüklemek için web sayfanızın aşağıdakileri yapması gerekir:

• Önyükleyici kullanarak Maps JavaScript API'yi yükleyin. API anahtarınız buraya iletilir. HTML veya JavaScript kaynak dosyalarına eklenebilir.
• Haritayı HTML sayfasına ekleyin ve gerekli CSS stillerini ekleyin.
• maps kitaplığını yükleyin ve haritayı başlatın.

gmp-map öğesini kullanarak harita ekleme

gmp-map öğesi, bir web sayfasına Google Haritası eklemenin tercih edilen yoludur. Web bileşenleri kullanılarak oluşturulan özel bir HTML öğesidir. gmp-map öğesini kullanarak bir web sayfasına harita eklemek için aşağıdaki adımları uygulayın.

1. Önyüklemeyi içeren bir script öğesini HTML sayfasına ekleyin veya script öğesi olmadan bir JavaScript ya da TypeScript kaynak dosyasına ekleyin. Bootstrap'i API anahtarınız ve diğer seçeneklerle yapılandırın. Dinamik kitaplık içe aktarma veya doğrudan komut dosyası yükleme yöntemlerinden birini seçebilirsiniz. Bu örnekte, dinamik komut dosyası yükleme önyükleyicisinin bir HTML sayfasına eklenmesi gösterilmektedir:

   <script>
     (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: "YOUR_API_KEY",
       v: "weekly",
       // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
       // Add other bootstrap parameters as needed, using camel case.
     });
   </script>

   Google Maps JavaScript API'yi yükleme hakkında daha fazla bilgi edinin.

2. HTML sayfasına bir gmp-map öğesi ekleyin. center için enlem ve boylam koordinatlarını (gerekli), zoom için bir yakınlaştırma değerini (gerekli) ve gerekirse map-id değerini (gelişmiş işaretçiler gibi bazı özellikler için gereklidir) belirtin.

<gmp-map center="-34.397,150.644" zoom="8" map-id="DEMO_MAP_ID">
</gmp-map>
index.html

Eksiksiz örnek kod

async function init(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map')!;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();
index.ts

async function init() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();
index.js

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

<html>
    <head>
        <title>Simple Map</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="-34.397,150.644" zoom="8" map-id="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>
index.html

div öğesi ve JavaScript kullanarak harita ekleme

div öğesini kullanarak bir web sayfasına harita eklemek için aşağıdaki adımları uygulayın.

1. Önyüklemeyi içeren bir script öğesini HTML sayfasına ekleyin veya script öğesi olmadan bir JavaScript ya da TypeScript kaynak dosyasına ekleyin. Bootstrap'i API anahtarınız ve diğer seçeneklerle yapılandırın. Dinamik kitaplık içe aktarma veya doğrudan komut dosyası yükleme yöntemlerinden birini seçebilirsiniz. Bu örnekte, dinamik önyüklemenin bir HTML sayfasına nasıl ekleneceği gösterilmektedir:

   <script>
     (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: "YOUR_API_KEY",
       v: "weekly",
       // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
       // Add other bootstrap parameters as needed, using camel case.
     });
   </script>

   Google Maps JavaScript API'yi yükleme hakkında daha fazla bilgi edinin.

2. HTML sayfasında, haritayı içerecek bir div öğesi ekleyin.

   <div id="map"></div>

3. CSS'de html, body ve #map öğelerinin yüksekliğini 100% olarak ayarlayın. Boş div öğeleri varsayılan olarak 0 yüksekliğe sahip olduğundan haritanın görünür olması için CSS height özelliği gereklidir. Yüzdeye dayalı yükseklikler, yüksek düzey modunda üst öğelerden aşağı doğru basamaklı olarak indiğinden html ve body öğelerinin yanı sıra #map öğesinde de height: 100% ayarının yapılması, tüm tarayıcılarda görüntü alanından harita kapsayıcısına kadar kesintisiz bir yükseklik devralma zinciri sağlar.

   html,
   body,
   #map {
     height: 100%;
     margin: 0;
     padding: 0;
   }

4. JS veya TS dosyasında, maps kitaplığını yüklemek ve haritayı başlatmak için bir işlev oluşturun. center için enlem ve boylam koordinatlarını, zoom için kullanılacak yakınlaştırma seviyesini belirtin. Gerekirse mapId özelliğini kullanarak bir harita kimliği ekleyin. Harita varsayılan olarak raster olacağından "VECTOR" harita seçeneğini belirterek vektör harita isteyin. Vektör harita türü, daha iyi görsel doğruluk sağlamanın yanı sıra haritadaki eğimi ve yönü kontrol etme olanağı sunduğundan en iyi kullanıcı deneyimi için önerilir.

   TypeScript

   let map: google.maps.Map;
   async function init(): Promise<void> {
       // Import the needed libraries
       const { Map } = await google.maps.importLibrary('maps');
   
       // Create a new map from the div with id="map".
       map = new Map(document.getElementById('map')!, {
           center: { lat: -34.397, lng: 150.644 },
           zoom: 8,
           renderingType: 'VECTOR',
       });
   
       console.log(map);
   }
   
   void init();
   index.ts

   JavaScript

   let map;
   async function init() {
       // Import the needed libraries
       const { Map } = await google.maps.importLibrary('maps');
   
       // Create a new map from the div with id="map".
       map = new Map(document.getElementById('map'), {
           center: { lat: -34.397, lng: 150.644 },
           zoom: 8,
           renderingType: 'VECTOR',
       });
   
       console.log(map);
   }
   
   void init();
   index.js

let map: google.maps.Map;
async function init(): Promise<void> {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map')!, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();
index.ts

let map;
async function init() {
    // Import the needed libraries
    const { Map } = await google.maps.importLibrary('maps');

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: 'VECTOR',
    });

    console.log(map);
}

void init();
index.js

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

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

<html>
    <head>
        <title>Simple Map</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>
        <div id="map"></div>
    </body>
</html>
index.html

Harita örneğinde özellikleri ayarlama ve alma

Harita örneğiyle etkileşim kurmak için kapsayıcı öğeyi seçin. Bunu yapmak için kullanılacak kod, gmp-map öğesini mi yoksa div öğesini mi kullandığınıza bağlı olarak değişir.

gmp-map öğesinden harita örneği alma

gmp-map öğesini kullanırken harita örneğini almak için document.querySelector kullanarak mapElement örneğini alın (burada gösterildiği gibi).

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

Ardından mapElement örneğinde özellikleri ayarlayın:

mapElement.zoom = 8;

MapElement sınıfı, dahili olarak Map sınıfını kullanır. Map sınıfına MapElement.innerMap özelliğini kullanarak erişebilirsiniz:

mapElement.innerMap.setOptions({
    mapTypeControl: false,
});

div öğesinden harita örneği alma

div öğesini kullanırken harita örneğini alın ve başlatma sırasında seçenekleri ayarlayın:

map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    mapTypeControl: false,
});

Başlatma işleminden sonra map örneğindeki seçenekleri burada gösterildiği gibi ayarlayın:

map.setOptions({
    zoom: 8,
});