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 burada 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. 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 dinamik komut dosyası yükleme başlatıcısının nasıl eklendiğ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>

    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ı (zorunlu), zoom için yakınlaştırma değerini (zorunlu) ve gerekirse map-id değerini (Gelişmiş İşaretçiler gibi bazı özellikler için zorunludur) belirtin.

<gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
</gmp-map>

Eksiksiz örnek kod

TypeScript

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

    // Create the map.
    const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}

initMap();

JavaScript

async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');
    // Create the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}
initMap();

CSS

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

HTML

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- 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>
    </head>

    <body>
        <gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>

Örneği deneyin

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

    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 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. 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 bir vektör harita isteğinde bulunun. Vektör harita türü, daha iyi görsel doğruluk ve haritada eğimi ve yönü kontrol etme olanağı sağladığı için en iyi kullanıcı deneyimi için önerilir.

    TypeScript

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

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

initMap();

    JavaScript

    let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (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",
    });
}
initMap();

Tam örnek kaynak kodunu görüntüleme

TypeScript

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

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

initMap();

JavaScript

let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (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",
    });
}
initMap();

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

HTML

<html>

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

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>

    <!-- 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>
</head>

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

</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 öğesini 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,
});