HTML, CSS ve JavaScript kodu kullanarak bir web sayfasına Google haritası ekleyebilirsiniz.
Bu sayfada, bir web sayfasına haritanın nasıl ekleneceği iki şekilde gösterilmektedir: gmp-map
özel HTML öğesini ve bir div
öğesini kullanarak.
Genel bakış
Bir haritayı yüklemek için web sayfanız aşağıdaki şartları karşılamalıdır:
- Bir önyükleme yükleyicisi kullanarak Maps JavaScript API'yi yükleyin. API anahtarınız burada aktarılır ve 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
öğesi kullanarak harita ekleme
gmp-map
öğesi, web bileşenleri kullanılarak oluşturulmuş özel bir HTML öğesidir.
gmp-map
öğesi kullanarak bir web sayfasına harita eklemek için aşağıdaki adımları uygulayın.
HTML sayfasında, API anahtarınız ve diğer seçeneklerle yapılandırılmış önyüklemeyi içeren bir
script
öğesi ekleyin. Aşağıdaki önyükleme örneğinde, gerekli olmadığı içincallback
parametresi atlanmıştır.<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=map,marker">
HTML sayfasında bir
gmp-map
öğesi ekleyin.center
için enlem ve boylam koordinatları,zoom
için yakınlaştırma değeri belirtin. Bu örnekteheight
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>
Örnek kodu tamamlayın
<html> <head> <title>Add a Map using HTML</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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 callback 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&callback=initMap&v=beta" defer ></script> </body> </html>
div
öğesi ve JavaScript kullanarak harita ekleme
Haritaların yüklenmesi için div
öğesi hâlâ destekleniyor. div
öğesi kullanarak bir web sayfasına harita eklemek için aşağıdaki adımları uygulayın.
HTML sayfasında, API anahtarınız ve diğer seçeneklerle yapılandırılmış önyükleyiciyi içeren bir
script
öğesi ekleyin. Alternatif olarak, önyükleme yükleyici kodunu doğrudan bir TypeScript veya JavaScript dosyasına (script
etiketlerini çıkararak) 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>
HTML sayfasında, haritayı içerecek bir
div
öğesi ekleyin.<div id="map"></div>
CSS'de harita yüksekliğini %100 olarak ayarlayın.
#map { height: 100%; }
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.
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();
Ö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();
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();
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> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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>