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 harita eklemenin iki yolu gösterilmektedir: gmp-map özel HTML öğesi ve div öğesi kullanılarak.

Genel Bakış

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

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

gmp-map öğesini kullanarak harita ekleme

gmp-map öğesi, 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. HTML sayfasında, API anahtarınızla ve diğer seçeneklerle yapılandırılmış önyüklemeyi içeren bir script öğesi ekleyin. Aşağıdaki örnek önyüklemede, callback parametresi gerekli olmadığı için atlanmıştır.

    <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps&v=beta" defer>
</script>

  2. HTML sayfasına bir gmp-map öğesi ekleyin. center için enlem ve boylam koordinatlarını, zoom için ise yakınlaştırma değeri belirtin. Bu örnekte height stil özelliği de belirtilmiştir.

    <gmp-map
  center="37.4220656,-122.0840897"
  zoom="10"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
></gmp-map>
    index.html

Örnek kodu tamamlayın

<html>
  <head>
    <title>Add a Map using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    ></gmp-map>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

div öğesi ve JavaScript kullanarak harita ekleme

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

  1. HTML sayfasına, API anahtarınız ve diğer seçeneklerle yapılandırılmış önyükleme yükleyiciyi içeren bir script öğesi ekleyin. Alternatif olarak, script etiketleri hariç tutarak önyükleme yükleyici kodunu doğrudan bir TypeScript veya JavaScript dosyasına ekleyin.

    <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>

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

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

  3. CSS'de harita yüksekliğini %100 olarak ayarlayın.

    #map {
  height: 100%;
}

  4. JavaScript 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ı ve zoom için kullanılacak yakınlaştırma düzeyini belirtin.

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

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

initMap();
index.js

Eksiksiz örnek kod

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.ts

JavaScript

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

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

initMap();
index.js

CSS

/* 
 * 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

<html>
  <head>
    <title>Simple Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

Örneği Deneyin