ম্যাপ ব্যাবহার করব কিভাবে

ম্যাপ ব্যাবহার করব কিভাবেঃ
--------------------
		ম্যাপের অনেক অনেক ব্যাবহার  এর মাঝে   আমার   জানা   তিনটি   ব্যবহার   হচ্ছেঃ

১। আই ফ্রেম ।
২। jQuery ম্যাপ পেলেস ।
৩। jQuery স্নজি ম্যাপ ।
৪। বডিতে এই লিং গুলো দিতে হবেঃ
    <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script>
		  <script type="text/javascript" src="maplace-0.1.3.min.js"></script>
	  	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
   নিম্নে বিস্তরিত আলোচনা করলামঃ
------------------------------------
১। আই ফ্রেম কিভাবে ব্যবহার করবঃ
 গুগল ম্যাপে লোকেশন সার্চ করে Settings Option এ share or embed map এ গিয়ে যে লোকেশন সার্চ করেছি তার লিংক পাওযা যাবে । embed map লিংক টি নিযে HTML মার্কাপে বসালাম । তারপর প্রয়োজন অনুযায়ী CSS ষ্টাইল করলাম ।

যেমনঃ
------
  HTML মার্কপঃ
------------
<div class="maps_content_area fix">
			<div class="map_iframe_content fix">
				<h1>Map Iframe</h1>
				<div id="map_iframe" class="fix">
					<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3652.488811719193!2d90.4292205!3d23.729942299999998!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755b847aba730c5%3A0x2533f3058ae0a06d!2sMugda+Bajar+Masjid+Rd%2C+Dhaka+1214!5e0!3m2!1sen!2sbd!4v1430935001427" frameborder="0" style="border:0"></iframe>
					<div class="iframe_overlay fix"></div>
					<button id="show_map"><span class="show_text">Show Map</span><span class="hide_text">Hide Map</span></button>
				</div>
			</div>
	</div>

CSS ষ্টাইলঃ
--------
/* Style For Map Content */
.maps_content_area{
    text-align: center;
}
.map_iframe_content{
    margin-bottom: 50px;
}
.map_iframe_content h1{}
#map_iframe{
    position: relative;
}
#map_iframe iframe{
    display: block;
    width: 100%;
    height: 500px;
}
.iframe_overlay{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 80;
}
button#show_map{
    position: absolute;
    left: 50%;
    bottom: 20px;
    margin-left: -80px;
    width: 160px;
    padding: 10px 0px;
    background: #333;
    border: 0px solid #fff;
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 3px;
    z-index: 90;
    cursor: pointer;
}
button#show_map:focus{outline:0;}
button#show_map span{
    display: block;
}
button#show_map.map span.show_text{
    display: none;
}
button#show_map.map span.hide_text{
    display: block;
}
button#show_map span.hide_text{
    display: none;
}
#gmap{width:100%;height:600px;}

jQuery কমান্ড
------------

// map Overlay js
$(document).ready(function() {
	$('button#show_map').click(function() {
		$(this).toggleClass('map').prev('div.iframe_overlay').fadeToggle(500);
	});
});
======================================================================================================================
২। jQuery ম্যাপ পেলেস কিভাবে ব্যবহার করবঃ

 বডি তে লিং দিযে প্রযোজন অনুযায়ী মার্কপ ও ষ্টাইল করলামঃ

যেমনঃ
------
  HTML মার্কপঃ
------------
			<div class="maplace_jquery_content fix">
					<h1>Maplace.js jQuery Map</h1>
					<div id="gmap"></div>
			</div>
CSS ষ্টাইলঃ
--------



jQuery কমান্ড
------------
// Map Include Js
$(document).ready(function() {
	new Maplace({
		show_markers: true,
		locations: [{
			lat: 23.729942,
			lon: 90.429220,
			zoom: 16,
		}]
	}).Load();
});
================================================================================================
  HTML মার্কপঃ
------------

				<div class="maplace_jquery_content fix">
				<h1>Snazzy jQuery Map</h1>
				<div class="map_contact_form fix">
					<div id="snazzy_map"></div>
					<div class="map_contact fix">
						<div class="contact_content fix">
							<form action="">
								<input type="text" placeholder="Your Full Name" class="contact_input" />
								<input type="text" placeholder="Your Email Address" class="contact_input" />
								<input type="text" placeholder="Your Company Name" class="contact_input" />
								<input type="text" placeholder="Your Phone Number" class="contact_input" />
								<textarea name="" placeholder="Your Message" id="" cols="30" rows="10" class="contact_message"></textarea>
								<input type="submit" value="Submit Your Form" class="contact_submit" />
							</form>
						</div>
					</div>
				</div>
			</div>
CSS ষ্টাইলঃ
--------

#snazzy_map{width:100%;height: 600px;}
.map_contact_form{
    position: relative;
}
.map_contact{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 40%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
}
.map_contact .contact_content{
    width: 84%;
    margin-left: 8%;
    margin-top: 20%;
}
jQuery কমান্ড
------------
			// When the window has finished loading create our google map below
			google.maps.event.addDomListener(window, 'load', init);

			function init() {
				var myLatlng = new google.maps.LatLng(23.729942, 90.429220);
				var mapOptions = {
				  zoom: 16,
				  scrollwheel: false,
				  center: myLatlng,
				  panControl: false,
				  zoomControl: false,
				  scaleControl: false,
				  streetViewControl: false,
				  overviewMapControl: false,
				  mapTypeControl: false,
				  styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
				}
				var map = new google.maps.Map(document.getElementById("snazzy_map"), mapOptions);
				var image = 'http://kingrussel.com/demo3/wp-content/themes/deisa/img/map_marker.png';
				// To add the marker to the map, use the 'map' property
				var marker = new google.maps.Marker({
					position: myLatlng,
					map: map,
					icon: image,
					draggable:false,
				});
				google.maps.event.addListener(marker, 'click', toggleBounce);
				function toggleBounce() {
				  if (marker.getAnimation() != null) {
					marker.setAnimation(null);
				  } else {
					marker.setAnimation(google.maps.Animation.BOUNCE);
				  }
				}
			}