Web Sayfasına Google Haritası ekleme

HTML, CSS ve JavaScript kodu kullanarak bir Google haritasını bir web sayfasına ekleyebilirsiniz. Bu sayfada, bir web sayfasına iki şekilde harita ekleme gösterilmektedir: gmp-map özel HTML öğesi ve bir div öğesi kullanılarak.

Genel Bakış

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

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

gmp-map öğesi kullanarak harita ekleyin

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

  1. HTML sayfasında, yapılandırılmış önyüklemeyi içeren bir script öğesi ekleyin diğer seçeneklerle de değiştirebilirsiniz. Aşağıdaki örnek bootstrap'te, callback parametresi gerekli olmadığı için atlandı.

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

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

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

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

  1. HTML sayfasında, önyükleme yükleyicisini içeren bir script öğesi ekleyin yapılandırdığınızdan emin olun. Alternatif olarak bootstrap yükleyici kodunu doğrudan bir TypeScript veya JavaScript dosyasına ekleyin. script etiket.

    <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 için bir işlev oluşturun ve haritayı başlatın. center için enlem ve boylam koordinatlarını belirtin ve zoom için kullanılacak yakınlaştırma düzeyini ayarlayın.

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

Örnek kodu tamamlayın

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