Ana Sayfa Genel Google Maps Kolay Kullanımı

Google Maps Kolay Kullanımı

1.605
0
Paylaş

Hepimiz web sitemize google haritasını eklemiştir ve bu haritayı genelde iframe kullanarak yapmışızdır. Artık iframe kullanmak hem çok basit gösteriyor hemde son zamanların temaları ile uyumsuz duruyor. Bunun yerine google maps apisini kullanarak daha hoş görüntülerde google haritalarını çok kolay bir şekilde kullanabilirsiniz. Bunun için yapmanız gereken haritanızı kullanacağınız bir div hazırlamak. Tabiki her etikette kullanılabilir ama web sitelerinde genel olarak div kullanıldığı için div örneğini veriyorum. Haritayı kullanacağımız yere aşağıdaki kodu yazın;

<div id="google_map"></div>

Daha sonra web sitenizin head bölümüne aşağıdaki javascript kodlarını yazmanız yeterlidir.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

 

<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(LATITUDE, LONGITUDE),
zoom: 16,
scrollwheel: false,
panControl: false,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('google_map'),
mapOptions);
var marker = new google.maps.Marker({
map: map,
position: map.getCenter()
});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent('<b>BASLIK</b><br>TELEFON');
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Burada değiştirmeniz gereken 4 yer vardır:

BASLIK: Bu alan konumunuzun adını yazacağınız alandır.
TELEFON: Bu alan telefon numaranızı yazacağınız yada mail adresinizi de yazabilirsiniz.
LATITUDE: Google konumunuzu aldığınız enlem bilgisi
LONGITUDE: Google konumunuzu aldığınız boylam bilgisi,

Ayrıca eğer haritaya mouse scroll’u ile zoom yapmak istiyorsanız “scrollwheel: false” değerini “true” yapmanız yeterli olacaktır.

Elbetteki oluşturmuş olduğumuz DIV için style bilgilerini de yazmayı unutmamamız gerekiyor. Yine web sitenizin style klasörüne aşağıdaki kod parçasını eklemeyi unutmayın.

/*///// Google Harita ///////*/
#google_map{
width:920px;
height: 300px;
border: #bbb 1px solid;
}
/*///// Google Harita ///////*/

Bir başka yazıda görüşmek üzere 🙂

Berk Hamza HAKYOL