Web sitenize fiziksel mağazalarınızın Google Haritalar koordinatlarına göre en yakın olanını kullanıcılara kolayca eklemek ister misiniz? İşte tam da bunu sağlayan bir kod var: Web Site Sağına Mağazalar İcon Kodu.
Bu kod, kullanıcıların bulundukları konuma en yakın mağazanızı görmelerine olanak tanır ve böylece daha kolay ve hızlı bir şekilde size ulaşmalarını sağlar. Peki, bu kod nasıl çalışır ve nasıl kullanılır? Hadi birlikte inceleyelim.
Kodu Nasıl Kullanabilirsiniz?
Öncelikle, Google Haritalar’da her bir mağazanızın koordinatlarını belirlemeniz gerekecek. Bu koordinatlar, mağazanızın tam olarak nerede olduğunu belirler ve kodun doğru çalışması için önemlidir.
Daha sonra, web sitenizin HTML koduna bu JavaScript kodunu eklemeniz gerekecek. Bu JavaScript kodu, kullanıcının bulunduğu konuma göre en yakın mağazanızı hesaplayacak ve gösterecek.
Günümüzde, insanlar sıklıkla seyahat ederken rotalarını planlamak için çevrimiçi haritaları kullanıyorlar. Bu blog yazısında, HTML, CSS ve JavaScript kullanarak basit bir Google Haritalar rota bulucu uygulaması oluşturmayı öğreneceğiz. Bu uygulama, kullanıcının bulunduğu konuma en yakın olan bir dizi belirlenmiş konum arasında en yakın olanı bulacak ve Google Haritalar’da bu yere yönlendirecek.
HTML Yapısı
İlk olarak, HTML yapısını oluşturalım. Bu yapı, temel olarak iki bölümden oluşur: rota bul butonunu içeren bir kutu ve harita için bir alan.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>Google Haritalar Rota</title> <style> /* CSS stilleri burada bulunacak */ </style> </head> <body><div class="box" onclick="openMap()"> <imgsrc="https://i.hizliresim.com/kfc8lsl.png" alt="Google Maps Icon"> </div> <divid="map"></div> <script> // JavaScript kodları burada bulunacak </script> </body></html>CSS Stilleri
Şimdi, kullanıcı arayüzünü şekillendirmek için CSS stillerini ekleyelim. Bu stil özellikle, rota bul butonunu ve harita alanını düzenler.
<style> #map { height: 400px; width: 100%; display: none; /* Harita varsayılan olarak gizlenir */ } .box { position: fixed; right: 2px; top: 68%; transform: translateY(-50%); width: 35px; height: 35px; background-color: #00bfff; border-radius: 5px; text-align: center; line-height: 35px; cursor: pointer; z-index: 999; /* Diğer öğelerin üzerinde kalacak şekilde ayarlandı */ } .box img { width: 20px;height: 20px; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>JavaScript Kodları
Son olarak, JavaScript kodlarını ekleyerek uygulamanın işlevselliğini sağlayalım. Bu kodlar, kullanıcının konumunu alır ve belirlenmiş konumlar arasında en yakın olanı bulur.
<script> var locations = [ // Konum verileri burada belirlenecek ]; // Diğer fonksiyonlar burada olacak </script>Bu noktada, temel yapıyı oluşturduk. Devam etmek için, konum verilerini ekleyip, kullanıcının konumunu alacak ve en yakın konumu bulacak JavaScript fonksiyonlarını tamamlayabiliriz. Bu adımların ayrıntılı açıklaması ve kodun tamamlanmasıyla sonraki adımlar uygulamanın çalışır duruma gelmesini sağlayacaktır.
Uygulamanın tamamı, kullanıcıların seyahat rotalarını planlamalarına yardımcı olacak basit, kullanışlı ve etkili bir araç sağlayacak.
