Top

Yeni Google Haritalar’ı Web Sitesine Gömme

Yeni Google Haritalar’ı Web Sitesine Gömme

Maps Engine uygulamasına gidiyoruz.

Bir arama gerçekleştiriyoruz.

Yeni bir harita tanımlıyoruz, başlık ve açıklamasıyla.

Katman adını giriyoruz.

Haritamız belirttiğimiz katmanın altında yer alıyor.

Etiketini, ikonunu, rengini ve daha fazla özelliğini özelleştirebiliyoruz.

Temasını bile değiştirebiliyoruz.

Paylaşım ayarlarını belirliyoruz.

Herşey bitince de klasöre tıklayıp siteme göm’ü seçiyoruz.

Bize bir kod parçası veriyor. ‘iframe bloğu’…

Bu kod bloğu responsive değil. Bu yüzden dışına bir div bloku açıyoruz.

stiline de

" position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
"

içerisindeki iframe de;
"
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
"

veriyoruz.

İsterseniz tabi tercihinize göre de uyarlayabilirsiniz.

Kaynak;

Quick Tip: Embedding New Google Maps | Webdesigntuts+.

No Comments