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.

Genel Bakış

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

  • Bir bootstrap yükleyici kullanarak Maps JavaScript API'yi yükleyin. API anahtarınızın iletildiği yer burasıdır. 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. Bootstrap'i içeren bir script öğesini bir HTML sayfasına ekleyin veya script öğesi olmadan bir JavaScript ya da TypeScript kaynak dosyasına ekleyin. Önyüklemeyi 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 doğrudan komut dosyası yükleme önyüklemesinin nasıl eklendiği gösterilmektedir:

    <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>

    Google Haritalar 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ı (zorunlu), zoom için yakınlaştırma değerini (zorunlu) ve gerekirse map-id değerini belirtin (Gelişmiş İşaretçiler gibi bazı özellikler için gereklidir). Haritanın görünür olması için CSS height özelliği gereklidir. HTML veya CSS'de belirtilebilir. Bu örnekte, height stili özelliği, basitlik için HTML'de belirtilmiştir.

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

Eksiksiz örnek kod

<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=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

div öğesi (eski) ve JavaScript kullanarak harita ekleme

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

  1. Bootstrap'i içeren bir script öğesini bir HTML sayfasına ekleyin veya script öğesi olmadan bir JavaScript ya da TypeScript kaynak dosyasına ekleyin. Önyüklemeyi 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 önyükleme ekleme işlemi 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 Haritalar 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 harita yüksekliğini %100 olarak ayarlayın. Haritanın görünür olması için CSS height özelliği gereklidir.

    #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ı, zoom için kullanılacak yakınlaştırma düzeyini belirtin. Gerekirse map-id özelliğini kullanarak bir harita kimliği ekleyin.

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

Örneği deneyin

Harita örneğinde özellikleri ayarlama ve alma

Harita örneğiyle etkileşimde bulunmak 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 öğesi kullanırken harita örneğini almak için mapElement örneğini almak üzere document.querySelector kullanın.

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ğiyle erişin:

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ğinde seçenekleri burada gösterildiği gibi ayarlayın:

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