Blog
CSS ve jQuery İle Farklılaştırılmış Google Haritası
- Ayrıntılar
- Kategori: Bilişim
- 18 Mayıs 2016 tarihinde yayınlandı.
- THEMT tarafından yazıldı.
Google Haritasını kişiselleştirerek konum noktasında istediğiniz bir logoyu koyabilir ve hatta harita renklerini dahi değiştirebilirsiniz!
Konum kısmına geldiğimizde Google Harita gerçekten de güçlü araçlar sunuyor. Böyle bir haritayı yapmak sadece birkaç dakika gerektiriyor.
Ne yazık ki haritanın renkleri ve şekli sitenizin tarzına tam olarak her zaman uymayabilir.
Bu yazı sayesinde haritanızın ana renklerini belirleyebileceksiniz. İlave olarak da doygunluk ve aydınlık seviyesini belirleyebileceksiniz ve tabi ki kişisel bir harita işaretçisi ekleyebileceksiniz. Varsayılan yakınlaştırma/uzaklaştırma düğmelerini de farklı olacak.
Tarayıcı Uyumu: IE9+ • Chrome • FireFox • Safari • Opera
Çalışır halini görmek için tıklayın ve ya çalışmayı indirmek için buraya tıklayın!
Yazı Hakkında
Okumakta olduğunuz yazı CodyHouse'un yapmış olduğum CSS and jQuery Custom Google Map başlıklı yazsının çevirisidir.
Yapı
İlk olarak Google Haritasını barındıracak section#cd-google-map kısmını oluşturmak gerekiyor ve devamında yakınlaştırma/uzaklaştırma için #cd-zoom-in ve #cd-zoom-out düğmeleri ve de adres çubuğu.
<section id="cd-google-map"> <!-- #google-container - haritayı tutuyor --> <div id="google-container"></div> <!-- #cd-zoom-in ve #zoom-out yakınlaştırma/uzaklaştırma için düğmeler olacak --> <div id="cd-zoom-in"></div> <div id="cd-zoom-out"></div> <address>86-90 Paul Street, London, EC2A 4NE</address> </section>
#cd-zoom-in ve #cd-zoom-out düğmeleri jQuery aracılığıyla haritaya iliştirilecek (Daha fazlası Eylem Tutma kısmında)
body etiketini kapatmadan önce Google Harita APIyi eklemek gerekiyor.
//
<script src="https://maps.googleapis.com/maps/api/js?key={API_KEYINIZ}"></script>
//
{API_KEYINIZ} kısmına kendi gerçek anahtar numaranızı yerleştirmeniz gerekiyor. Buraya tıklayarak API anahtarı oluşturma hakkında bilgi alabilirsiniz. İngilizcedir!
Tarz
section#cd-google-map ve div#google-container kısımlarını width: 100%; yapmak haritanın içinde bulunduğu kısıma tamamen yayılmasını sağlar. Ayrıca #cd-zoom-in/#cd-zoom-out düğmelerinin bazı temel tarzları da şekillendi
Haritanın sitili jQuery dosyası içine yerleştirilmiştir.
Bir şey daha: mobil ortamda haritanın yüksekliğini düşürmek ziyaretçinin işini daha da kolaylaştıracaktır.
Eylem Tutma
Her şeyden önce Google Harita parametrelerini tanımlamak gerekiyor
var latitude = 51.5255069,
longitude = -0.0836207,
map_zoom = 14;
// Google Harita kişisek konum simgesi - .png IE11 için
var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
var marker_url = ( is_internetExplorer11 ) ? 'img/cd-icon-location.png' : 'img/cd-icon-location.svg';
Konum işaretçisi olarak SVG türünde görsel mevcut fakat IE11 için ayrıca PNG türünde görsel de gerekiyor. Harita tarzını değiştirmek için ana renk, doygunluk ve aydınlık değerleri bulunmakta.
var main_color = '#2d313f', saturation_value= -20, brightness_value= 5;
Bu üç değer haritanın kişiselleşmesini sağlayacak bilgileri tanımlıyor. Daha fazla kişiselleştirme adına Google Geliştirici Kılavuzu’na bakabilirsiniz.
var style= [
{
// Haritadaki otoyol etiketlerini gösterme
featureType: 'road.highway',
elementType: 'labels',
stylers: [
{visibility: "off"}
]
},
{
// Otoyol renkleri/aydınlık/doygunluk
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
// Diğer element tarzları ise buraya
];
scrollwheel seçeneğini false yapmak yakınlaştırma anında fare tekerini saf dışı bırakır.
Son olarak, CustomZoomControl fonksiyonu ile #cd-zoom-in/#cd-zoom-out düğmelerini kişisel haritamıza iliştirdik ve haritanın sol üst bölgesine konumlandırdık.
map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);
Etiketler
