Bir çok websitesi ve şirket tarafından kulanılan Google haritalar artık daha kullanışlı. Sazzad Houssain tarafından jQuery ve Css3 kullanılarak hazırlanmış olan bu örnekte mapsı sitenizde kendi zevkinize göre uyarlayabilirsiniz. Yanlış anlaşılmasın görünümü tamamen değişmiyor. Sadece mekanınızı harita üzerinde gösterirken Google üzerinden herhangi bir işlem yapmıyorsunuz. Bu çalışma sayesinde şirketinizin yada göstermek istediğiniz yerleri seçip kırmızı noktalı şeklinde işaretleyebiliyorsunuz. Ayrıca mouse kırmızı noktaların üzerine geldiği anda tooltip yani bilgilendirme balonu açılıyor. Mouse üzerine geldiğinde açılan bilgi baloncuklarının içine şirketiniz hakkında kısa açıklamalar yazabilirsiniz.
Bu örnek üzerinde yapacağınız değişiklikler sadece kendi siteniz üzerinde göründüğü gibi bütün internet siteleri üzerinde görünmüyor. Sadece sizin ziyaretçileriniz sizin siteniz üzerinden görebiliyorlar.
Demo açılır açılmaz üstten dört tane kırmızı renkli ikon düşüyor. Bu ikonlar haritada işaretlediğiniz yerlerin tam üstüne düşüyor. Bu ikonların görünümünü değiştirebilirsiniz isterseniz şirketinizin sembolünü de kullanabilirsiniz bu bölümde. O zaman haritalar üzerinde bayrak yada ikon değilde sizin şirketinizin sembolü sizin şirketinizi gösterecektir.
Bölüm ekleme kısmı biraz zor. Yeryüzünde kendi koordinatlarınızı bilip javascript kod içine yerleştirmeniz gerekiyor. Yaklaşık bir sene önce buna benzer bir konu yayınlamıştım. Yanlışlıkla ftp dizinindeki dosyaların tamamını silerken yazıda malesef uçup gitti. Bahsettiğim yazıda Türkiye’nin farklı farklı bölgelerini haritalar üzerinde ekleyip anlatmıştım. Baya zor bir durumdu. Örnek bir koordinat : 40.704686,-74.011602
Haritalar üzerinde belirlediğiniz koordinatlara özel başlıklar ve açıklamaların yanında resim de ekleyebilirsiniz. Tek yapmanız gereken resim kodunu javascript kodların içine yerleştirmek. Nereye yerleştireceğinizi tam olarak bilmiyorsanız en kolayından <small> /small> etiketleri arasına ekleyebilirsiniz.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js dosya adresleri :
<script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
JavaScript :
<script type="text/javascript">
/*
Global
*/
var map;
function initialize() {
/*
Basic Setup
*/
var latLng = new google.maps.LatLng(40.704686,-74.011602);
var myOptions = {
panControl: true,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
draggable: true,
disableDoubleClickZoom: true, //disable zooming
scrollwheel: false,
zoom: 18,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP // ROADMAP; SATELLITE; HYBRID; TERRAIN;
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/*
MARKER
*/
//for custom image
var image = 'https://png-1.findicons.com/files/icons/2582/koloria/17/pin.png';
var markerlatlng = new google.maps.LatLng(40.704686,-74.011602);
var locations = [
['Bondi <strong>Beach</strong><br /><small>Something Awesome Here</small>', 40.703686,-74.011602, 4],
['Coogee Beach<br /><small>House of Alex</small>', 40.704686,-74.011402, 5],
['Cronulla Beach<br /><small>Some hip-hoppin lyrics to your wonderlust song.<br /> We can write most stuff here to make it look like <br />it says something veeerry important.</small>', 40.704986,-74.011002, 3],
['Manly Beach<br /><small>Jacked on Roids</small>', 40.704286,-74.012002, 2],
['Maroubra Beach', 40.704986,-74.011902, 1]
];
var marker = new google.maps.Marker({
position: markerlatlng,
icon: image,
animation: google.maps.Animation.DROP,
title:"Neighborhood"
});
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image,
animation: google.maps.Animation.DROP,
title:"Neighborhood"
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
/*
INFO Bubble
*/
myInfoWindowOptions = {
content: '<div class="info-window-content">You can write anything you like here. You can even use <strong>heading</strong> tags here.</div>',
maxWidth: 275
};
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map,marker);
});
google.maps.event.addListener(marker, 'dragstart', function(){
infoWindow.close();
});
infoWindow.open(map,marker);
}//end initialize
/*
onLoad
*/
$(function(){
initialize();
$("#zo").click(function(event){
event.preventDefault();
map.setZoom( map.getZoom()-1 );
map.setCenter(new google.maps.LatLng(40.704686,-74.011602));
});
$("#zi").click(function(event){
event.preventDefault();
map.setZoom( map.getZoom()+1 );
});
$("#gt").click(function(event){
event.preventDefault();
var lt1 = new google.maps.LatLng(-33.92, 151.25);
//map.setZoom( 16 );
map.panTo(lt1);
});
});
</script>
Css :
.info-window-content {
font-size: 14px;
font-family: Arial, Verdana;
font-weight: 100;
line-height: 30px;
width: 200px;
}
#canvas_holder{
position: fixed;
top: 0px;
left: 0px;
width:100%;
height:100%;
z-index: 0;
}
#map_canvas{
width:100%;
height:100%;
position: "absolute";
top: 0px;
left: 0px;
overflow: "hidden";
}
#holder{
background: rgba(0,0,0,0.8);
z-index: 1000;
position: absolute;
right: 10px;
top: 10px;
color: white;
padding: 10px;
text-align: center;
border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
}
#holder a{
color: white;
padding: 10px;
text-decoration: none;
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div id="holder"> <a href="#" id="zi">+</a> <a href="#" id="zo">-</a> <a href="#" id="gt">Marker</a> </div> <div id="canvas_holder"> <div id="map_canvas"></div> </div>