Oxxi.net  - Birlikteliğin Gücü Bulut Sunucu

Go Back   Oxxi.net - Birlikteliğin Gücü > Google & Msn-Yahoo kardeşler > Google Optimizasyon > Google API

Cevapla
 
LinkBack Seçenekler Stil
  #1  
Alt 26-01-2013, 07:22:04
 
Antalya Şubesi
Mesajlar: 3
iTrader: (0)
Standart Google Map Api 3.0


Daha önce basit bir google map V2 için aşağıdakine benzer kodlar kullanıyordu.

Kod:
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA6j3VMSV9UmmUFtzLhzZhVxRYv3kezhNjA8FABQIAAAA6j3VMSV9UmmUFtzLhzZhVxRYv3kezhNjA8F&sensor=true"
           type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(41.06554,29.009622), 13);
        map.setUIToDefault();
      }
    }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>
Google API v3 özellikleri başlıca şunlardır,
  • Daha fazla harita işağretçisi
  • Fusion Tablolarıyla derecelendirme, değerlendirme seçenekleri
  • MVC objeleriyle eylence
  • PHP / MYSQL kodlarını kullanılabilirlik
  • PHP / MYSQL ile mazaları ve alışveriş bölgelerini göstermek
  • Kullanıcı tarafından eklenen bilgileri kaydetmek
  • PHP / MYSQL ile ipye göre yer belirleme sistemlerinin kullanımı
  • IPhone ve Adroid için özel çözümler
  • ve daha fazlası V3 için ek özellikleri içeriyor.

Basit bir V3 kodu:
Kod:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
   src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Basit bir IP nize göre bulunduğunuz yeri bulan V3 kodu:

Kod:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>
<script type="text/javascript">

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag =  new Boolean();
var map;
var infowindow = new google.maps.InfoWindow();
 
function initialize() {
  var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
  // Try W3C Geolocation method (Preferred)
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      contentString = "Location found using W3C standard";
      map.setCenter(initialLocation);
      infowindow.setContent(contentString);
      infowindow.setPosition(initialLocation);
      infowindow.open(map);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  } else if (google.gears) {
    // Try Google Gears Geolocation
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
      contentString = "Location found using Google Gears";
      map.setCenter(initialLocation);
      infowindow.setContent(contentString);
      infowindow.setPosition(initialLocation);
      infowindow.open(map);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  } else {
    // Browser doesn't support Geolocation
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag == true) {
    initialLocation = newyork;
    contentString = "Error: The Geolocation service failed.";
  } else {
    initialLocation = siberia;
    contentString = "Error: Your browser doesn't support geolocation. Are you in Siberia?";
  }
  map.setCenter(initialLocation);
  infowindow.setContent(contentString);
  infowindow.setPosition(initialLocation);
  infowindow.open(map);
}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>

</body>
</html>
Aşağıdaki örnek V3 kodlarıyla yapılmış basit bir harita işağretleme örneğidir

Kod:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
</head>
<body>

<div id="map_canvas" style="width: 730px; height: 500px; margin-top: 20px;"> </div>

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script><script type="text/javascript"
                                  src="http://maps.google.com/maps/api/js?sensor=false">
                            </script><script type="text/javascript">
                                function initialize() {
                                    var Koordinatlar = new google.maps.LatLng(39.86156903970107,32.83813489062504);
                                    var myOptions = {
                                        zoom: 6,
                                        center: Koordinatlar,
                                        mapTypeId: google.maps.MapTypeId.HYBRID
                                    };
                                    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                    myOptions);

                                    var BilgiPenceresi = new google.maps.InfoWindow(
                                    { content: 'Asil Cephe Giydirme ve Alüminyum Doğrama Sistemleri',
                                        size: new google.maps.Size(50,50),
                                        position: Koordinatlar
                                    });
                                    BilgiPenceresi.open(map);

                                    var Isagretci = new google.maps.Marker({
                                        map:map,
                                        draggable:true,
                                        animation: google.maps.Animation.DROP,
                                        position: Koordinatlar,
                                        icon: 'http://google-maps-icons.googlecode.com/files/factory.png'
                                    });
                                    google.maps.event.addListener(Isagretci, 'dragend', function(){
                                        Isagretci.setAnimation(google.maps.Animation.BOUNCE);
                                    });


                                }
                            </script><script type="text/javascript">initialize()</script>
                           
                           
</body>
</html>
Aşağıdaki örnek ekrana eklenen harita üzerindeki koordinatı ve zoom leveli alabiliyor

Kod:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>        
</head>
<body>
<form name="harita_formu" method="post">
            <input type="hidden" name="tur" value="harita">
            <table id="box-table-a">
                <tbody>
                   
                    <tr>
                        <td>Harita</td>
                        <td>
                            <script type="text/javascript"
                                   src="http://maps.google.com/maps/api/js?sensor=false">
                            </script>

                            <script type="text/javascript">
                                function initialize() {
                                    var Koordinatlar = new google.maps.LatLng(39.86156903970107,32.83813489062504);
                                    var myOptions = {
                                        zoom: 6,
                                        center: Koordinatlar,
                                        mapTypeId: google.maps.MapTypeId.HYBRID
                                    };
                                    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                    myOptions);

                                    var BilgiPenceresi = new google.maps.InfoWindow(
                                    { content: 'Asil Cephe Giydirme ve Alüminyum Doğrama Sistemleri',
                                        size: new google.maps.Size(50,50),
                                        position: Koordinatlar
                                    });
                                    BilgiPenceresi.open(map);

                                    var Isagretci = new google.maps.Marker({
                                        map:map,
                                        draggable:true,
                                        animation: google.maps.Animation.DROP,
                                        position: Koordinatlar,
                                        icon: 'http://google-maps-icons.googlecode.com/files/factory.png'
                                    });
                                    google.maps.event.addListener(Isagretci, 'dragend', function(){
                                        Isagretci.setAnimation(google.maps.Animation.BOUNCE);
                                    });

                                    google.maps.event.addListener(map, 'click', function(event){
                                        //map.setCenter(event.latLng);
                                        BilgiPenceresi.setPosition(event.latLng);
                                        Isagretci.setPosition(event.latLng);
                                        document.forms['harita_formu'].elements['harita_zoom'].value=map.getZoom();
                                        document.forms['harita_formu'].elements['harita_geo'].value=event.latLng.lat()+","+event.latLng.lng();
                                    });

                                    google.maps.event.addListener(map, 'zoom_changed', function(event) {
                                        document.forms['harita_formu'].elements['harita_zoom'].value=map.getZoom();
                                        //document.forms['harita_formu'].elements['harita_geo'].value=event.latLng.lat()+","+event.latLng.lng();
                                    });


                                }
                            </script>

                            <div id="map_canvas" style="width:605px; height: 400px; border:10px solid #e3e3ca"></div>
                            
                            <input type="text" name="harita_geo" value="39.86156903970107,32.83813489062504" />
                            <input type="text" name="harita_zoom" value="6"  />
                            <div class="f_kc">
                                <ul>
                                    <li>Harita üzerindeki ev simgesini firmanızın bulunduğu adres üzerine yerleştiriniz. </li>

                                    <li>Simge harita üzerinde her tıkladığınız yere gelecektir.</li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Adres Bilginiz</td>
                        <td><text type="text" class="text" style="width:605px;">HÜRRİYET MH. 1744 SK. ŞENZEYBEK APT. NO:1 KAT:1 MERSİN</text></td>

                    </tr>
                   
                    <tr>
                        <td></td>
                        <td><input type="button" class="genel buton buton2" value="Kaydet" onclick="DugmeleriKitle(); submit();" /></td>
                    </tr>
                </tbody>
            </table>
        </form>
</body>
</html>
çalışma için DijitalDers'e teşekkürler
Attached Images
Dosya tipi: jpg google-maps-api-v3.jpg (14.1 KB (Kilobyte), 19 views)
Alıntı ile Cevapla

Sponsor Bağlantılar
  #2  
Alt 26-01-2013, 10:54:04
BiLaL - ait Kullanıcı Resmi (Avatar)
 
Bursa Şubesi
Mesajlar: 1,247
iTrader: (11)
Standart

firma yerini haritada belli etmek ve bunu siteye eklemek için bu kodlarmı kullanılıyor ?

örnek olarak şu olabilir
Avada – Contact Page 1
Alıntı ile Cevapla

Cevapla


Bu konuyu görüntüleyen üyeler: 1 (0 kayıtlı üye ve 1 misafir)
 
Seçenekler
Stil

Yetkileriniz
Konu açma yetkiniz yok.
Cevap yazma yetkiniz yok.
Eklenti yükleme yetkiniz yok.
Mesajınızı değiştirme yetkiniz yok.

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık



Forum Saati: 11:36:12. Zaman dilimi GMT +3 olarak ayarlanmıştır.


Powered by vBulletin™ Version 3.8.4
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.
Search Engine Friendly URLs by vBSEO 3.6.0
İçerik sağlayıcı paylaşım sitelerinden biri olan oxxi.net Birlikteliğin Gücü Adresimizde T.C.K 20.ci Madde ve 5651 Sayılı Kanun'un 4.cü maddesinin (2).ci fıkrasına göre TÜM ÜYELERİMİZ yaptıkları paylaşımlardan sorumludur.