Haritalarda yer işaretleme

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>