antalya web tasarım

Php ile Dinamik Google Haritaları Oluşturmak

Bu makalemizde Google Maps Api servisini kullanarak web sayfalarımızda dinamik içerikli haritalar oluşturacağız.Google Maps servisinden yararlanabilmemiz için ilk olarak Google web sayfasını ziyaret edip Api-key oluşturmamız gerekiyor.Api-key oluşturmak için http://www.google.com.tr/apis/maps/signup.html adresini kullabilirsiniz.

Api-key oluşturduktan sonra veri tabanımızı oluşturalım.

ID: Her harita için benzersiz bir değer belirtecek
Baslik: Harita Başlığı
Enlem: Enlem üzerindeki koordinat
Boylam: Boylam üzerindeki koordinat
Zoom: Harita üzerindeki yakınlaşma miktarı

Veri Tabanımızı oluşturduktan sonra gerekli sayfalarımızı oluşturmaya geçebiliriz.
Öncelikle “ayar.php” adında boş bir php dosyası oluşturalım ve veri tabanımıza bağlanmak için gerekli parametlerimizi yazalım.

<?php

$vthost = "localhost";    //üzerinde çalışacağımız mysql sunucusu %99 değiştirmenize gerek yok standarttır.

$vtkullanici = "root";    //mysql kullanıcı adı

$vtsifre = "123123";   //mysql kullanıcı şifresi

$vtadi = "maps";      //veri tabanının adı

$baglan = @mysql_connect($vthost,$vtkullanici,$vtsifre);  //veri tabanına bağlanmak için gereken sunucu adı,kullanıcı adı ve kullanıcı şifresini bağlantı değişkenimize atadık

    if(!$baglan) die ("Mysql Bağlantısı Sağlanamadı");  // eğer mysql sunucusuna bağlantı sağlanmazsa baglan değişkenini sonlandırıp yazmış olduğumuz hata mesajını ekrana yazdırıcak.

mysql_Select_db($vtadi,$baglan) or die ("Veri Tabanı Bağlantısı Sağlanamadı");     //veri tabanına bağlanamazsa bağlanma işlemini sonlandıracak ve yazmış olduğumuz hata mesajını ekrana yazdıracak.

?>

“index.php” adında boş bir php dosyası oluşturalım ve harita bilgilerimizi veri tabanından çekicek kodlarımızı yazalım.

<?php

//veri tabanı bağlantı parametlerimizin bulunduğu sayfayı çağırıyoruz

include("ayar.php");

?>
<table>
<tr>
<td width="150" align="center"><b>Harita ID</b></td>
<td width="300" align="center"><b>Harita Başlık</b></td>
<td width="200" align="center"><b>Önizle</b></td>
</tr>

<?php

//haritalar tablosundaki tüm alanları seç ve id numarasına göre tersten sıralar

$sorgu = mysql_query("SELECT * FROM haritalar order by ID desc");

//haritalar tablosundaki seçtiğimiz alanları while döngüsüne alarak seçili alanların yazdırılması bitine kadar döngü işlemini devam ettirir

    while($yaz = mysql_fetch_array($sorgu)){

//haritalar tablosundaki "ID" alanındaki değeri "id" değişkenine atadık

        $id        =    $yaz["ID"];

//haritalar tablosundaki "Baslik" alanındaki değeri "baslik" değişkenine atadık

        $baslik    =    $yaz["Baslik"];

      ?>

<tr>

<!--haritalar tablosundaki "ID" alanını yazdırır-->

<td width="150" align="center"><?php echo $id;?></td>

<!--haritalar tablosundaki "Baslik" alanını yazdırır-->

<td width="300" align="center"><?php echo $baslik;?></td>

<!--haritalar tablosundaki "ID" alanındaki değeri "id" adlı değişkene aktarmıştık.Şimdi "id" değişkenini haritamızın detaylı şekilde gösterileceği "goster.php" sayfamıza yönlendirileceği linke ekledik-->

<td width="200" align="center"><a href="goster.php?id=<?php echo $id;?>">Önizle</a></td>
</tr>
<?php } ?>
</table>

“goster.php” adlı boş bir php dosyası oluşturuyoruz ve harita bilgilerini detaylı bir şekilde görüntüleyecek olan kodlarımızı yazıyoruz.

<?php

//veri tabanı bağlantı parametlerimizin bulunduğu sayfayı çağırıyoruz

include("ayar.php");

//"index.php" dosyamızdan gelen haritaya ait id değerini alarak "id" değişkenine atıyoruz

$id    =    intval($_GET['id']);

//haritalar tablosundaki belirtilen id ye ait  tüm alanları seçer

$sorgu = mysql_query("SELECT * FROM haritalar where ID='$id'");

//haritalar tablosundaki seçtiğimiz alanları while döngüsüne alarak seçili alanların yazdırılması bitine kadar döngü işlemini devam ettirir

    while($yaz = mysql_fetch_array($sorgu)){

//haritalar tablosundaki "Enlem" alanındaki değeri "enlem" değişkenine atadık

      $enlem    =    $yaz['Enlem'];

//haritalar tablosundaki "Boylam" alanındaki değeri "boylam" değişkenine atadık

      $boylam    =    $yaz['Boylam'];

//haritalar tablosundaki "Zoom" alanındaki değeri "zoom" değişkenine atadık

      $zoom    =    $yaz['Zoom'];

      }
      ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--Başlangıçta oluşturduğumuz Api-keyi "key" stringine atıyoruz ("ABQIAAAA1AyyoqTwvL4FYVv9RX-UZRS2UztaDSNruPSGSODVRCNJKRnyiRSR1lgI85sroQmdcrgNXXXXXXXXXX" yerine siz kendi anahtarınızı yazın) -->

<script src="https://maps.google.com/maps?file=api&v=2&key=ABQIAAAA1AyyoqTwvL4FYVv9RX-UZRS2UztaDSNruPSGSODVRCNJKRnyiRSR1lgI85sroQmdcrgNXXXXXXXXXX"
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
function haritaGoster() {
if (GBrowserIsCompatible()) {

<!--Haritanın gözükeceği alanı ("haritaDiv") belirtiyoruz.-->

var denemeHaritasi = new GMap2(document.getElementById("haritaDiv"));

denemeHaritasi.addControl(new GSmallMapControl());

<!--Haritanın koordinatlarını belirtiyoruz-->

var koordinat = new GLatLng(<?php echo $enlem;?>,<?php echo $boylam;?>);

<!--Haritada gözükücek olan resmin koordinatlarını belirtiyoruz -->

var resimKoordinat = new GLatLng(<?php echo $enlem;?>,<?php echo $boylam;?>);

var resim = new GIcon();

resim.image = "img/icon.png";

resim.iconAnchor = new GPoint(6, 5);

resim.infoWindowAnchor = new GPoint(25, 2);

<!--Haritada gözükücek olan resmi koordinatlarını "isaret" değişkenine atıyoruz  -->

var isaret = new GMarker(resimKoordinat,resim);

GEvent.addListener(isaret, "click", function() {

}
);

<!--Haritaya yakınlaştırma oranını belirtiyoruz-->

denemeHaritasi.setCenter(koordinat, <"php echo $zoom;">);

<!--Haritaya "isaret" değişkenimizi ekliyoruz -->

denemeHaritasi.addOverlay(isaret);
}
}
//]]>
</script>
</head>

<!--Sayfa yüklendiğinde "haritaGoster" fonksiyonu çalışıcak ve harita görüntülenicek -->

<body onload="haritaGoster()" onunload="GUnload()">

<!--Haritanın görüntüleneceği alan -->

<div id="haritaDiv" style="width: 300px; height: 400px"></div>

</body>

</html>

Kaynak Dosyayı İndir

Koordinat (Enlem,Boylam) bulmak için bu siteyi kullanabilirsiniz.

Burak KIRBAĞ