Web sayfasına Google Haritası ekleme

HTML, CSS ve JavaScript kodu kullanarak bir web sayfasına Google 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ış

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

• Bootstrap yü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ı eklemek için tercih edilen yöntemdir. Bu, 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. Bir HTML sayfasına önyüklemeyi içeren bir script öğesi 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 seçeneklerinden birini belirleyebilirsiniz. Bu örnekte, bir HTML sayfasına dinamik komut dosyası yükleme bootstrap'inin 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

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 bir map-id değerini (Gelişmiş İşaretçiler gibi bazı özellikler için gereklidir) belirtin.

<gmp-map center="-34.397,150.644" zoom="8" mapId="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" mapId="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. HTML sayfasına önyükleme içeren bir script öğesi 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 seçeneklerinden birini belirleyebilirsiniz. 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ına, 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 ayarlandığından haritanın görünür olması için CSS height özelliği gereklidir. Yüksek düzey modunda, yüzdeye dayalı yükseklikler üst öğelerden aşağı doğru aktarıldığından #map öğesinin yanı sıra html ve body öğelerinde 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 haritada 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 kapsayan öğ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, burada gösterildiği gibi MapElement.innerMap özelliği kullanılarak erişilir:

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

div öğesinden harita örneği alma

div öğesini kullanırken harita örneğini alın ve seçenekleri başlatma sırasında 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,
});