Skip to main content
ammap change country on click

Ammap dynamically load map of the country on click

Haritaya tıklayınca ilgili ülkenin haritasını değiştirelim.

Bu yazının konusu AmMap haritasında ülkeye tıklayınca, var olan dünya haritasını kaldırıp ilgili ülkenin haritasını yüklemek. (yani dynamicall load map yapıcaz, erik gelirse o da bulsun diye arada ingilizce serpiştiriyoruz:)

Yazıyı da şundan yazdım; Şurada çözümü aranmış fakat pek becerememişler sanki. Birde biz yapalım dedik 🙂

İlk haritamız dünya haritası olduğu için maps kaynağı worldLow

(daha&helliip;)

Devamını Oku

google maps api yer işaretleme

Google maps api yer işaretleme

Google maps api place,makers

Bu yazımda google maps apinin farklı özelliklerini kullanmayı ve isteklerimize göre değiştirmeyi ele alacağız. Google maps api ile yer işaretleme yapabilir (google maps marker), harita üzerine ikon koyabilir (google maps marler icon) ve harita ikonuna tıklandığında detaylı bilgilerini gösterebiliriz(google maps infowindow  .Şimdi  ,örneğin bir bayilik sistemi var, haritalar
kullanılması gerekiyor. Müşteri panelden haritada seçtiği yerleri işaretleyecek ve sitesinin bayilik kısmında gösterecek. İki gün önce gelen bir işte şöyle bir yapı yaptım:
google maps api yer işaretleme

Bu bir örnek idi. Sizden istenenler doğrultusunda farklı işler yapıcaksınız elbet.

 

Google Maps Api Key

Google bizden api anahtarı istiyor. https://developers.google.com/maps/documentation/javascript/ burada GET A KEY ile bir key alalım. Bu birazdan işimize yarayacak.

Google Maps Api V3 Yer İşaretleme

Sürüklenebilir bir nesne ile lat,lng değerlerini alalım. Bu aldığımız değerleri alıp işlemek size kalmış. Veritabanına kayıt ettirip daha sonra yukarıdaki resmini verdiğim sistemi yapabilirsiniz.

/*js dosyamızı çağıralım*/
<script src="https://maps.googleapis.com/maps/api/js?key=****KEY***;libraries=places"></script>;
<div id="map"></div>
<script>
$(function(){
var map;
 /* haritamızı gösterelim #map divinin içinde */
 map = new google.maps.Map(document.getElementById('map'), {
 center: {lat: -34.397, lng: 150.644}, /* haritamızın başlangıç koordinatları*/
 zoom: 8 /* isteğe bağlı zoom*/
 });

/* Google maps yer işaretleme için Google.maps.marker kullanıyoruz*/
 var marker = new google.maps.Marker({
     position:{
     /*işaretlenecek enlem boylam koordinatlar*/
     lat:-34.397, 
     lng:150.644
 },
 map:map, /* haritamızı gösteriyoruz*/
 draggable:true /* harita üzerinde sürüklenebilir olmasını istersek true yapalım */
 });

/*
* Eğer sürüklenen marker nesnemizin koordinatlarını almak isiyorsak eventler ile bunu yakalamamız gerekli.
* Sonra aldığımız değerleri nasıl kullanmak isteğiniz size kalmış. ister al veritabanına kayıt et. ister farklı şeyler yap.
* Burada consola yazdırdım. öğeyi denetle ile consoldan markerin haretkerleri değiştikce console logların değiştiğini görebilirsiniz.
*/
 google.maps.event.addListener(marker,'dragend',function(){
    console.log(marker.getPosition().lat());
    console.log(marker.getPosition().lng());
 });

});
</script>

(daha&helliip;)

Devamını Oku

Doğuş Pompa