Html Sayfasına Dinamik Google Haritası Ekleme
Jquery 25 Haziran, 2018

Merhaba arkadaşlar bu yazımda sizlere Html sayfasına dinamik google haritasının nasıl ekleneceğini anlatacağım. Dinamik dedim çünkü girilen adres bilgisine göre haritamız değişecek. Web sitelerinin iletişim sayfalarında kullanılan statik haritalar yerine dinamik haritalar kullanmak daha akıllıca olacaktır.

Öncelikle html sayfamızda şöyle bir div'imiz olsun:

<div class="place">
   <!-- bu div in içine harita gelecek. -->
</div>

Bu div'in içerisine jquery ile haritayı yerleştireceğiz. Jquery kodlarımız aşağıdaki gibidir. Bu örnekte adres olarak "Ordu" verilmiştir, bu adresi veritabanından veya bir inputtan alıp addr değişkenine atayabiliriz.

$(document).ready( function(){
var addr = "Ordu" // adres verisi burada olacak
   if (addr != "") {
        var embed = "<iframe width='100%' height='400' frameborder='0' style='border:0' 
        allowfullscreen scrolling='no' marginheight='0' marginwidth='0' 
        src='https://maps.google.com/maps?&amp;q=" +
        encodeURIComponent(addr) +"&amp;output=embed'></iframe>";
        $('.place').html(embed);
    }  
});

Ekran görüntümüz şekildeki gibidir.

Html Sayfasına Dinamik Google Haritası Ekleme

Kodlamaya devam!


Benzer Yazılar

Yorumlar

Html Sayfasına Dinamik Google Haritası Ekleme
Jquery 25 Haziran, 2018

Merhaba arkadaşlar bu yazımda sizlere Html sayfasına dinamik google haritasının nasıl ekleneceğini anlatacağım. Dinamik dedim çünkü girilen adres bilgisine göre haritamız değişecek. Web sitelerinin iletişim sayfalarında kullanılan statik haritalar yerine dinamik haritalar kullanmak daha akıllıca olacaktır.

Öncelikle html sayfamızda şöyle bir div'imiz olsun:

<div class="place">
   <!-- bu div in içine harita gelecek. -->
</div>

Bu div'in içerisine jquery ile haritayı yerleştireceğiz. Jquery kodlarımız aşağıdaki gibidir. Bu örnekte adres olarak "Ordu" verilmiştir, bu adresi veritabanından veya bir inputtan alıp addr değişkenine atayabiliriz.

$(document).ready( function(){
var addr = "Ordu" // adres verisi burada olacak
   if (addr != "") {
        var embed = "<iframe width='100%' height='400' frameborder='0' style='border:0' 
        allowfullscreen scrolling='no' marginheight='0' marginwidth='0' 
        src='https://maps.google.com/maps?&amp;q=" +
        encodeURIComponent(addr) +"&amp;output=embed'></iframe>";
        $('.place').html(embed);
    }  
});

Ekran görüntümüz şekildeki gibidir.

Html Sayfasına Dinamik Google Haritası Ekleme

Kodlamaya devam!


Benzer Yazılar

Yorumlar