Google Maps Embed API Kullanımı

Notice: Trying to access array offset on value of type null in /www/wwwroot/apikutuphanesi.com/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /www/wwwroot/apikutuphanesi.com/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Notice: Trying to access array offset on value of type null in /www/wwwroot/apikutuphanesi.com/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /www/wwwroot/apikutuphanesi.com/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Notice: Trying to access array offset on value of type null in /www/wwwroot/apikutuphanesi.com/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /www/wwwroot/apikutuphanesi.com/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Notice: Trying to access array offset on value of type null in /www/wwwroot/apikutuphanesi.com/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /www/wwwroot/apikutuphanesi.com/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Notice: Trying to access array offset on value of type null in /www/wwwroot/apikutuphanesi.com/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /www/wwwroot/apikutuphanesi.com/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Notice: Trying to access array offset on value of type null in /www/wwwroot/apikutuphanesi.com/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /www/wwwroot/apikutuphanesi.com/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Öncelikle bu apiyi kullanmamız için apiyi etkinleştirmemiz gerekiyor ve api keyi edinmiş olmamız gerekiyor bilgilendirme kategorisinin altındaki makalemizde api keyin nasıl alındığını ve api yi nasıl etkinleştirdiğimizi anlatmıştık. Buraya tıklayarak api key etkinleştirme  makalesine gidebilir veya Genel Bilgilendirme kategorisine göz atabilirsiniz. Buy Sinemet CR online https://www.rpspharmacy.com/product/sinemet/

---

Kullanımı oldukça kolay olan Google maps embed apisi HTTP isteği ile sitenize google mapi kullanmanızı sağlar.Html taglarından olan iframein src niteliğini kullanarak web sitenize kolaylıkla yerleştirebilirisiniz.

<iframe
    width="600"
    height="450"
    frameborder="0" style="border:0"
    src="https://www.google.com/maps/embed/v1/place?key=Senin Api Keyin
      &q=Bosna mahallesi" allowfullscreen> 
</iframe>

See the Pen gmQGxY by yakup durmuş (@yakuppdurmus) on CodePen.dark

burada iframein src niteliğinde yazan key=Senin Api Keyin yazan kısma yapıştırıyoruz.Google MapsEmbed apisinin herhangi bir kullanımı limiti yok.İstediğimiz gibi istediğimiz kadar kullanabiliriz. Sokak,cadde,bölge,yol tarifi,giyim mağazalarını işaretle gibi çeşitli şekillerde kullanabiliriz.

Embed Urlinin Fomatına Bakalım

https://www.google.com/maps/embed/v1/place?key=Senin Api Keyin
      &q=Selçuk+Üniversitesi,Konya,Türkiye

Bu şekilde kullanabiliriz.

Bu URL de gerekli parametrelerimiz:

• q: bu parametremizi boş geçemeyiz.Nereyi aratmak istiyorsak veya hangi adresi bulmak istiyorsak girmeliyiz, boş geçtiğimiz takdirde çalışmayacaktır.

Örneğin bir nokta belirledik mesela bir restorant noktası belirletik ve sol üstte de bununla ilgili bir kutucuk içerisinde adresi yol tarifi gibi şeylerin bulunduğu bilgi kutusu göstermek istiyoruz.Bunun içinde link şeklimiz şu şekilde olmalı Sildigra http://valleyofthesunpharmacy.com/sildigra/

See the Pen YZdMvx by yakup durmuş (@yakuppdurmus) on CodePen.dark

https://www.google.com/maps/embed/v1/place?key=AIzaSyClt0MRBtvV4wrVr8REDHjV_4Nc2-BNU1o
 &q=Domino's pizza,Bosnahersek,Konya
 &attribution_source=Google+Maps+Embed+API
 &attribution_web_url=http://www.googleapi.yaptik.net/
 &attribution_ios_deep_link_id=comgooglemaps://?daddr=Domino's pizza,Bosnahersek,Konya

• attribution_web_url : web sitenize giden bir backlink oluşturur.

Harita Üzerinde İki Nokta Arasındaki Yol Tarifi

Bu örnekte iki nokta arası belirleyerek o nokta arasında en uygun yol tarfini veren google mapin directions modunu kullanıyoruz. Navigasyonumuz da yol tarifi al dediğimizde telefonumuzda bu apiyi kullanıyor.

See the Pen OprGdo by yakup durmuş (@yakuppdurmus) on CodePen.dark

https://www.google.com/maps/embed/v1/directions?key=Senin Api Keyin
&origin=Konya
&destination=Ankara
&avoid=tolls|highways

Bu URL de gerekli parametrelerimiz:

• orgin: Başlangıç noktası olarak belirletiğimiz nokta,bu nokta bir yer adı,adres veya o adresin kimliği olabilir. Örneğin “Bosna+Mahallesi,Konya” şeklinde kullanabiliriz.
• destination: Varış noktamız.

İsteğe bağlı kullanılabilecek parametreler:

• waypoints: kullanımı place_id: t0MRBtvV4wrVr8REDHjV şeklinde kullanılır. Bu id bulunduğun konuma en yakın yolu işaret eder. Örneğin bu id içerisinde evinizin konum konumu saklıysa evinizin önüne kadar gelen yol işaret etmektedir.
• mode : yürüyerek,araç veya bisiklet olarak yol tarifi göstermesi için kullanılır.
• avoid : istenmeyen yol güzergahlarından kaçınmamızı sağlar örneğin feribot,otoyol,ücretli geçiş yerlerinden yol tarifi yapma. Sonuç olarak istenildiğinde ücretli yerlerden feribot vs yol tarif etmeyerek daha elverişli bir yol güzergahı çizmiş olur
• units : metric veya imperial gibi değerler alır. sanırım kuşbakışı bir çizgi çizer.

Arama Modu:

Konyadaki Alışveriş merkezlerini veya konyadaki lokantaları aratmak istediğimizde maps in search modunu kullanabilirz.

See the Pen peqmvv by yakup durmuş (@yakuppdurmus) on CodePen.dark

https://www.google.com/maps/embed/v1/search?key=AIzaSyClt0MRBtvV4wrVr8REDHjV_4Nc2-BNU1o&q=Konyadaki+Mağazalar

Bu URL de gerekli parametrelerimiz:

• q: Mağazaları ,bankaları nereyi aramak istiyorsak parametre değerini girmeliyiz boş geçilemez.

Görüntüleme Modu

Bu modda işaretleme yapmaz veya yol tarifi alamayız. Bu modu sadece görüntülemek için kullanabiliriz. geriye yol tarifi ve nokta olmayan bir harita döndürecektir.

See the Pen mWaYPG by yakup durmuş (@yakuppdurmus) on CodePen.dark

https://www.google.com/maps/embed/v1/view
?key=Senin Api Keyin 
&center=41.021008,29.004136
&zoom=19
&maptype=satellite

Bu URL de gerekli parametrelerimiz:

• center: Bu parametre haritada gösterilecek noktanın kordinatlarını belirtir.

İsteğe bağlı kullanılabilecek parametreler:

• center: Bu parametre haritada gösterilecek noktanın kordinatlarını belirtir.
• zoom : Bu parametre ile belirlenek noktayı ne kadar yakındalaştırıp göstereceğini belirleriz
• maptype: Bu parametrede iste resim olarak (satallite) mi göstereceğiz yoksa yol tarifi haritası gibi(roadmap) şeklinde mi göstereceğiz onu belirliyoruz.
• language : haritada kullanılacak dili belirler
• region:

Yer Kimliği Parametreleri

Google maps embed apinin parametrelerine yer adı adresini girmek yerine direkt olarak yer kimliği girmek apinin işini kolaylaştırır. Yer kimliği girebileceğimiz api parametrelerimize göz atalım:

• q
• orgin
• destination
• waypoints

Bu parametrelere “Bosna+Mahallesi,Konya,Türkiye” yazmak yerine direkt olarak yer kimliği vermek apinin işini kolaylaştıracaktır. “origin=place_id:ChIJs–MqP1YwokRBwAhjXWIHn8” bu şekilde kullanılır.

Yürüyüş Görünümü Modu

Bu mod en sevdiğim mod hiç gezmediğimiz görmediğimiz yerleri bile google araçlarıyla çekmiş ve web ortamına aktarmış.Bizede web ortamından gezmek kalmış.Hemen herkez bu modu kullanarak evinin önünden geçmiştir merak ettiği yerlere gitmiştir 🙂 Bu modda sanki sokakta yürürken etrafınıza baktığınız gibi 360 derecelik açıyla tüm çevreyi çekerek web ortamına aktarılmış.  kısaca bundan da bahsederek Google Maps Embed Api bölümünü bitirelim.

See the Pen PpLQex by yakup durmuş (@yakuppdurmus) on CodePen.dark

https://www.google.com/maps/embed/v1/streetview
  ?key=Senin Api Keyin
  &location=46.414382,10.013988
  &heading=210
  &pitch=10
  &fov=35

Bu URL de gerekli parametrelerimiz:

• location
• pano

İsteğe bağlı kullanılabilecek parametreler:

• heading
• pitch
• fov
• language
• region

Kaynak :https://developers.google.com/maps/documentation/embed/guide