Google Harita (Google Maps) ekleme i\u015flemleri hakk\u0131nda detayl\u0131 bilgi vereyim. Web sitesine, uygulamaya ve di\u011fer platformlara Google Maps entegrasyonu i\u00e7in g\u00fcncel y\u00f6ntemleri ara\u015ft\u0131ray\u0131m.
# Google Harita Ekleme: Web Sitesine ve Uygulamalara Entegrasyon Rehberi<\/p>\n\n\n\n
Google Maps entegrasyonu, i\u015fletmelerin fiziksel konumlar\u0131n\u0131 m\u00fc\u015fterilerine g\u00f6stermesi i\u00e7in en etkili y\u00f6ntemdir. Bu rehberde, web sitelerine ve uygulamalara Google Harita ekleme y\u00f6ntemlerini, API entegrasyonunu ve en iyi uygulamalar\u0131 detayl\u0131 olarak ele alaca\u011f\u0131z.<\/p>\n\n\n\n
En h\u0131zl\u0131 ve kolay y\u00f6ntemdir. Herhangi bir API anahtar\u0131 veya kodlama bilgisi gerektirmez .<\/p>\n\n\n\n
1. Google Haritalar’da Konum Bulun<\/strong><\/p>\n\n\n\n 2. Payla\u015fma Se\u00e7ene\u011fini Kullan\u0131n<\/strong><\/p>\n\n\n\n 3. HTML Kodunu Kopyalay\u0131n<\/strong><\/p>\n\n\n\n 4. Web Sitenize Yap\u0131\u015ft\u0131r\u0131n<\/strong><\/p>\n\n\n\n \u00d6nemli Parametreler:<\/strong><\/p>\n\n\n\n Daha fazla \u00f6zelle\u015ftirme ve kontrol i\u00e7in Maps Embed API kullan\u0131l\u0131r .<\/p>\n\n\n\n 1. Google Cloud Console’a Giri\u015f<\/strong><\/p>\n\n\n\n 2. Proje Olu\u015fturun<\/strong><\/p>\n\n\n\n 3. API’leri Etkinle\u015ftirin<\/strong><\/p>\n\n\n\n 4. API Anahtar\u0131 Olu\u015fturun<\/strong><\/p>\n\n\n\n 5. G\u00fcvenlik Ayarlar\u0131 (Kritik!)<\/strong><\/p>\n\n\n\n MAP_MODE Se\u00e7enekleri:<\/strong><\/p>\n\n\n\n \u00d6rnek – Place Modu:<\/strong><\/p>\n\n\n\n \u00d6rnek – Directions Modu:<\/strong><\/p>\n\n\n\n WordPress kullan\u0131c\u0131lar\u0131 i\u00e7in \u00fc\u00e7 farkl\u0131 y\u00f6ntem bulunmaktad\u0131r .<\/p>\n\n\n\n Ad\u0131mlar:<\/strong><\/p>\n\n\n\n Avantaj:<\/strong> H\u0131zl\u0131, ek y\u00fck yok En iyi SEO uyumlu y\u00f6ntemdir .<\/p>\n\n\n\n Kurulum:<\/strong><\/p>\n\n\n\n Tek Konum Ekleme:<\/strong><\/p>\n\n\n\n Birden Fazla Konum:<\/strong><\/p>\n\n\n\n API Anahtar\u0131 Alma (AIOSEO i\u00e7in):<\/strong><\/p>\n\n\n\n \u00dccretsiz ve kullan\u0131m\u0131 kolay alternatif .<\/p>\n\n\n\n Kurulum:<\/strong><\/p>\n\n\n\n \u0130\u015fletmenizin Google Haritalar’da g\u00f6r\u00fcnmesi i\u00e7in :<\/p>\n\n\n\n 1. Google Benim \u0130\u015fletmem’e Kay\u0131t<\/strong><\/p>\n\n\n\n 2. \u0130\u015fletme Ekleme<\/strong><\/p>\n\n\n\n 3. Adres ve Konum Belirleme<\/strong><\/p>\n\n\n\n 4. Do\u011frulama<\/strong><\/p>\n\n\n\n Mobil cihazlarda d\u00fczg\u00fcn g\u00f6r\u00fcnmesi i\u00e7in CSS ile responsive yap\u0131land\u0131rma :<\/p>\n\n\n\n Dinamik ve interaktif haritalar i\u00e7in :<\/p>\n\n\n\n \u00d6rnek Kod:<\/strong><\/p>\n\n\n\n Maps Embed API:<\/strong><\/p>\n\n\n\n Di\u011fer API’ler:<\/strong><\/p>\n\n\n\n Google Harita ekleme i\u015flemi, teknik bilgi seviyesine g\u00f6re farkl\u0131 y\u00f6ntemlerle yap\u0131labilir:<\/p>\n\n\n\n \u0130\u015fletmenizin Google My Business’ta kay\u0131tl\u0131 olmas\u0131 ve do\u011frulanm\u0131\u015f olmas\u0131, haritan\u0131z\u0131n Google’da g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc art\u0131r\u0131r ve yerel SEO’ya katk\u0131 sa\u011flar .<\/p>\n\n\n\n Not: Google Cloud Console aray\u00fcz\u00fc ve fiyatland\u0131rma politikalar\u0131 zaman i\u00e7inde de\u011fi\u015febilir. G\u00fcncel bilgiler i\u00e7in resmi Google dok\u00fcmantasyonunu kontrol edin.<\/em><\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Google Harita (Google Maps) ekleme i\u015flemleri hakk\u0131nda detayl\u0131 bilgi vereyim. Web sitesine, uygulamaya ve di\u011fer platformlara Google Maps entegrasyonu i\u00e7in g\u00fcncel y\u00f6ntemleri ara\u015ft\u0131ray\u0131m.# Google Harita Ekleme: Web Sitesine ve Uygulamalara Entegrasyon Rehberi Google Maps entegrasyonu, i\u015fletmelerin fiziksel konumlar\u0131n\u0131 m\u00fc\u015fterilerine g\u00f6stermesi i\u00e7in en etkili y\u00f6ntemdir. Bu rehberde, web sitelerine ve uygulamalara Google Harita ekleme y\u00f6ntemlerini, API […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-31","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/bufajans.com.tr\/index.php\/wp-json\/wp\/v2\/posts\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bufajans.com.tr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bufajans.com.tr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bufajans.com.tr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bufajans.com.tr\/index.php\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":1,"href":"https:\/\/bufajans.com.tr\/index.php\/wp-json\/wp\/v2\/posts\/31\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/bufajans.com.tr\/index.php\/wp-json\/wp\/v2\/posts\/31\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/bufajans.com.tr\/index.php\/wp-json\/wp\/v2\/media?parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bufajans.com.tr\/index.php\/wp-json\/wp\/v2\/categories?post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bufajans.com.tr\/index.php\/wp-json\/wp\/v2\/tags?post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
\n
<iframe \n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d...KOD...!2d...!3d...!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x...%3A0x...!2s...!5e0!3m2!1str!2str!4v...\"\n width=\"600\" \n height=\"450\" \n style=\"border:0;\" \n allowfullscreen=\"\" \n loading=\"lazy\" \n referrerpolicy=\"no-referrer-when-downgrade\">\n<\/iframe><\/code><\/pre>\n\n\n\n\n
width<\/code> ve height<\/code>: Harita boyutlar\u0131 (piksel veya % olarak)<\/li>\n\n\n\nallowfullscreen<\/code>: Tam ekran moduna izin verir<\/li>\n\n\n\nloading=\"lazy\"<\/code>: Sayfa performans\u0131 i\u00e7in lazy loading<\/li>\n\n\n\nreferrerpolicy=\"no-referrer-when-downgrade\"<\/code>: G\u00fcvenlik i\u00e7in \u00f6nerilir<\/li>\n<\/ul>\n\n\n\n2. Google Maps Embed API ile Geli\u015fmi\u015f Entegrasyon<\/h2>\n\n\n\n
API Anahtar\u0131 Alma:<\/h3>\n\n\n\n
\n
\n
\n
\n
\n
https://www.siteniz.com\/*\n https:\/\/siteniz.com\/*<\/code><\/pre>\n\n\n\n\n
Embed API URL Yap\u0131s\u0131:<\/h3>\n\n\n\n
https://www.google.com\/maps\/embed\/v1\/MAP_MODE?key=YOUR_API_KEY&PARAMETERS<\/code><\/pre>\n\n\n\nMod<\/th> A\u00e7\u0131klama<\/th> Kullan\u0131m Alan\u0131<\/th><\/tr><\/thead> place<\/strong><\/td> Belirli bir konum g\u00f6sterir<\/td> \u0130\u015fletme konumu<\/td><\/tr> view<\/strong><\/td> Belirli bir g\u00f6r\u00fcn\u00fcm\/koordinat<\/td> Manzara g\u00f6sterimi<\/td><\/tr> directions<\/strong><\/td> \u0130ki nokta aras\u0131 yol tarifi<\/td> “Yol tarifi al” butonu<\/td><\/tr> streetview<\/strong><\/td> Sokak g\u00f6r\u00fcn\u00fcm\u00fc<\/td> Sanal tur<\/td><\/tr> search<\/strong><\/td> Arama sonu\u00e7lar\u0131<\/td> Birden fazla konum<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n <iframe\n width=\"600\"\n height=\"450\"\n style=\"border:0\"\n loading=\"lazy\"\n allowfullscreen\n referrerpolicy=\"no-referrer-when-downgrade\"\n src=\"https:\/\/www.google.com\/maps\/embed\/v1\/place?key=API_ANAHTARINIZ&q=Eiffel+Tower,Paris+France\">\n<\/iframe><\/code><\/pre>\n\n\n\n<iframe\n width=\"600\"\n height=\"450\"\n style=\"border:0\"\n src=\"https:\/\/www.google.com\/maps\/embed\/v1\/directions?key=API_ANAHTARINIZ&origin=Oslo+Norway&destination=Telemark+Norway&avoid=tolls|highways\">\n<\/iframe><\/code><\/pre>\n\n\n\n3. WordPress’e Google Harita Ekleme<\/h2>\n\n\n\n
Y\u00f6ntem 1: Eklentisiz (iframe)<\/h3>\n\n\n\n
\n
Dezavantaj:<\/strong> SEO avantaj\u0131 s\u0131n\u0131rl\u0131, y\u00f6netimi zor<\/p>\n\n\n\nY\u00f6ntem 2: All in One SEO (AIOSEO) Eklentisi<\/h3>\n\n\n\n
\n
\n
\n
\n
Y\u00f6ntem 3: WP Google Maps Eklentisi<\/h3>\n\n\n\n
\n
[wpgmza id=\"1\"]<\/code> sayfalar\u0131n\u0131za ekleyin<\/li>\n<\/ol>\n\n\n\n4. Google My Business ile Harita Ekleme<\/h2>\n\n\n\n
\n
\n
\n
\n
5. Responsive (Mobil Uyumlu) Harita Ekleme<\/h2>\n\n\n\n
<div class=\"map-container\">\n <iframe \n src=\"https:\/\/www.google.com\/maps\/embed?pb=...\"\n width=\"100%\" \n height=\"450\" \n style=\"border:0;\" \n allowfullscreen=\"\" \n loading=\"lazy\">\n <\/iframe>\n<\/div>\n\n<style>\n.map-container {\n position: relative;\n padding-bottom: 56.25%; \/* 16:9 oran\u0131 *\/\n height: 0;\n overflow: hidden;\n max-width: 100%;\n}\n\n.map-container iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n<\/style><\/code><\/pre>\n\n\n\n6. Google Maps JavaScript API ile Geli\u015fmi\u015f Entegrasyon<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n <title>\u0130\u015fletme Konumu<\/title>\n <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=API_ANAHTARINIZ\"><\/script>\n <style>\n #map { height: 400px; width: 100%; }\n <\/style>\n<\/head>\n<body>\n <h3>\u0130\u015fletmemizin Konumu<\/h3>\n <div id=\"map\"><\/div>\n\n <script>\n function initMap() {\n const konum = { lat: 41.0082, lng: 28.9784 }; \/\/ \u0130stanbul \u00f6rne\u011fi\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n zoom: 15,\n center: konum,\n });\n const marker = new google.maps.Marker({\n position: konum,\n map: map,\n title: \"\u0130\u015fletme Ad\u0131\"\n });\n }\n window.onload = initMap;\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n7. S\u0131k Kar\u015f\u0131la\u015f\u0131lan Sorunlar ve \u00c7\u00f6z\u00fcmleri<\/h2>\n\n\n\n
Sorun<\/th> \u00c7\u00f6z\u00fcm<\/th><\/tr><\/thead> “Harita y\u00fcklenmiyor”<\/strong><\/td> API anahtar\u0131n\u0131n do\u011fru oldu\u011funu ve etkinle\u015ftirildi\u011fini kontrol edin<\/td><\/tr> “Bu sayfa Google Haritas\u0131 y\u00fckleyemiyor”<\/strong><\/td> Fatura hesab\u0131 olu\u015fturulmam\u0131\u015f olabilir<\/td><\/tr> API anahtar\u0131 \u00e7al\u0131nma riski<\/strong><\/td> Website restrictions ekleyin, HTTP referer k\u0131s\u0131tlamas\u0131 yap\u0131n<\/td><\/tr> Mobilde bozuk g\u00f6r\u00fcn\u00fcm<\/strong><\/td> Responsive CSS kullan\u0131n, width=”100%” yap\u0131n<\/td><\/tr> Yava\u015f y\u00fckleme<\/strong><\/td> loading=\"lazy\"<\/code> ekleyin, sayfa alt\u0131na yerle\u015ftirin<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n8. \u00dccretlendirme ve Limitler<\/h2>\n\n\n\n
\n
\n
Sonu\u00e7<\/h2>\n\n\n\n
\n
\n\n\n\n