ডিফল্ট কন্ট্রোল সেটসহ একটি গুগল ম্যাপঃ

গুগল ম্যাপ - ডিফল্ট কট্রোল

যখন একটি স্ট্র্যান্ডার্ড গুগল ম্যাপ দেখানো হয় তখন তাতে যে কন্ট্রোলসেটটি ডিফল্ট হিসেবে থাকে তা নিম্নরূপঃ

জুম - একটি স্লাইডার অথবা "+/-” বাটনগুলো দেখায় যা ম্যাপের জুম লেভেল নিয়ন্ত্রন করতে ব্যবহৃত হয়
প্যান - ম্যাপকে প্যানিং অর্থাৎ ভার্টিকেল/হরাইজন্টালি নাড়াচাড়া করার জন্য একটি প্যান কন্ট্রোল দেখায়
ম্যাপটাইপ - ইউজারদের ম্যাপটাইপ (স্যটেলাইট/রোডম্যাপ) পরিবর্তন করতে দেয়
স্ট্রিট ভিউ - একটি পেজম্যান আইকন দেখায় যা ম্যাপের উপর টেনে নিয়ে স্ট্রিট ভিউ সচল করা যায়

গুগল ম্যাপ - আরও কিছু কন্ট্রোল

ডিফল্ট কন্ট্রোলের সাথে, গুগল ম্যাপে আরও কিছু কন্ট্রোল রয়েছেঃ
স্কেল - ম্যাপের স্কেল এলিমেন্ট দেখায়
রোটেট - একটি ছোট বৃত্তাকার আইকন দেখায় যা ম্যাপটিকে ঘুরাতে সাহাজ্য করে
অভারভিউ ম্যাপ - একটি থাম্বনেল অভারভিউ দেখায় যা বৃহত্তর এলাকায় বর্তমান ম্যাপের ভিউপোর্ট প্রতিফলিত করে।

আপনি যখন ম্যাপঅপশনে ম্যাপ তৈরি করবেন অথবা যখন setOptions() কে কল করার মাধ্যমে ম্যাপের অপশন পরিবর্তন করবেন তখন কোন কন্ট্রোলগুলো দেখাবেন তা নির্দিষ্ট করে দিতে পারবেন।

গুগল ম্যাপ - ডিফল্ট কন্ট্রোলগুলো ডিজেবল করা

আপনি হয়তো ডিফল্ট কন্ট্রোলগুলো বন্ধ করে দিতে চাইবেন। এটা করতে, ম্যাপ অপশন অবজক্টের ভেতরে disableDefaultUI প্রপার্টিকে ট্রু (true) করে দিনঃ

disableDefaultUI:true

গুগল ম্যাপ - সবগুলো কন্ট্রোলকে চালু করা

কিছু কন্ট্রোল ম্যাপে ডিফল্ট হিসেবে দেখায় এবং কিছু কন্ট্রোল আপনি যতক্ষণ না চালু করছেন ততক্ষণ দেখা যাবেনা। ম্যাপে কোন কন্ট্রোল যোগ করা হবে বা কোনটা লুকানো হবে তা ম্যাপ অপশন অবজেক্টে ঠিক করে দিতে হয়। কন্ট্রোলকে দৃশ্যমান করতে ট্রু সেট করতে হবে এবং লুকাতে হাইড (hide) সেট করতে হবে।
নিচের উদাহরণটি সবগুলো কন্ট্রোলকে অন করে বা দেখায়ঃ
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

গুগল ম্যাপ - কন্ট্রোলগুলো মডিফাই করা

কিছু কিছু ম্যাপ কন্ট্রোল কনফিগার করা যায়। কন্ট্রোল অপশন ফিল্ডকে নির্দিষ্ট করে দেয়ার মাধ্যমে কন্ট্রোলগুলো কনফিগার করা যায়।
উদাহরণস্বরূপ, একটি জুম কন্ট্রোলকে মডিফাই বা পরিবর্তন করার অপশনগুলো zoomControlOptions ফিল্ডকে ঠিক করে দেয়া হয়। zoomControlOptions ফিল্ড নিচের অপশনগুলো ধারণ করতে পারেঃ

google.maps.ZoomControlStyle.SMALL - একটি ছোট জুম কন্ট্রোল দেখায় (শুধু + এবং - বাটন থাকে)
google.maps.ZoomControlStyle.LARGE - স্ট্যান্ডার্ড জুম স্লাইডারকে দেখায়
google.maps.ZoomControlStyle.DEFAULT - ডিভাইস ও ম্যাপের আকার অনুযায়ী সবথেকে ভালো জুম কন্ট্রোল দেখায়

উদাহরণঃ
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}

নোটঃ আপনি যদি কোন কন্ট্রোলকে মডিফাই করতে চান তাহলে প্রথমে কন্ট্রোলটিকে সচল (ট্রু হিসেবে সেট করুন) করে নিন।

আরেকটি কনফিগার করার মতো কন্ট্রোল হলো MapType কন্ট্রোল
mapTypeControlOptions ফিল্ডে এই কন্ট্রোলের অপশনগুলো কিভাবে মডাফাই করা হবে তা ঠিক করে দিতে হয়। mapTypeControlOptions ফিল্ড নিচের অপশনগুলো ধারণ করতে পারেঃ

google.maps.MapTypeControlStyle.HORIZONTAL_BAR - প্রতি ম্যাপ টাইপের জন্য একটি বাটন দেখায়
google.maps.MapTypeControlStyle.DROPDOWN_MENU - একটি ড্রপডাউন মেন্যু থেকে ম্যাপ টাইপ সিলেক্ট করার ব্যবস্থা করে
google.maps.MapTypeControlStyle.DEFAULT - স্ক্রিনের আকার অনুযায়ী ডিফল্ট ম্যাপ টাইপ দেখায়

উদাহরণঃ
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

আপনি ControlPosition প্রপার্টির মাধ্যমে একটি কন্ট্রোলের অবস্থানও ঠিক করে দিতে পারবেনঃ

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
}

গুগল ম্যাপ - কাস্টম কন্ট্রোল

এমন একটি কাস্টম কন্ট্রোল তৈরি করা যাক যা আপনাকে ক্লিক করার পর সব সময় লন্ডনে নিয়ে ( যদি ম্যাপকে ড্র্যাগ করা হয়) যাবেঃ

controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Home'
controlUI.appendChild(controlText);

Google Maps Events(গুগল ম্যাপ এর ঘটনাবলি)

Click The Marker to Zoom(জুম করার জন্য মার্কার Click করুন)
আমরা এখনও পূর্বের page এর map ব্যাবহার করচিঃ এখানে যে map টি ব্যাবহার করা হয়েছে তা লন্ডন, ইংল্যান্ড কেন্দ্রিক ।

যখন একজন ব্যাবহারকারী মার্কার এ ক্লিক করেন তখন আমরা map টিকে বড় করে উপস্থাপন করি (আমরা marker হিসেবে একটি
event handler যুক্ত করেছি যা map টি কে বড় করে দেখায় Click করার পর)।

কোড টি এরূপ ঃ

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});

আমরা addListener নামক event handler টি যুক্ত করেছি event গুলির notification খুব সহজে পাওয়ার জন্য ।
এই প্রক্রিয়াটি একটি object এর জন্য দরকার হয়, যেমনঃ শোনার জন্য একটি event কে call করা হয় যখন এটি ঘটে।

Pan Back to Marker
এই পর্যায়ে map টি তে একটি event handler ব্যাবহার করা হয় 'center' property পরিবর্তন করার জন্য এবং marker
কে pan back করলে map টি তে ৩ সেকেন্ড পরে একটি center_changed ঘটনা ঘটে, codeগুলি নিম্নরূপঃ

google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});

Open an InfoWindow When Clicking on The Marker(একটি InfoWindow Open হয় যখন Marker
এ Click করা হয় )
Marker এ Click করা হলে নিম্নরূপ কিছু text দেখা যায় infowindow তেঃ

var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

Set Markers and Open InfoWindow for Each Marker(Marker নির্দিষ্ট করন এবং প্রত্যেক Marker এর
জন্য InfoWindow খুলা )
একটি function Run হয় যখন ব্যাবহারকারী map এ click করেন।

placeMarker() function টি একটি marker এর স্থান নির্দিষ্ট করে যেখানে ব্যাবহারকারী click করে এবং একটি
infowindow এটিতে marker এর latitudes and longitudes দেখায়ঃ

উদাহরনঃ
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});

function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'
Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}

Add a marker to the Google map(Google map এ marker যোগকরন)

Google Maps - Overlays( মোড়ক তৈরি করন)

Overlays হচ্ছে map এর উপরে একটি object যেটি latitude এবং longitude এর সীমিত করনে কাজ করে ।

Google Maps এর কয়েক ধরনের overlay দেখা যায় -

১) Marker- map এর একটি একক জাইগা নির্দেশ করে। Marker টি একটি প্রচলিত icon images দেখায়।
২) Polyline- map এর উপরে একসারি line নির্দেশ করে।
৩) Polygon- map এর উপরে একসারি line এবং এর আকৃতি "closed"।
৪) Circle(বৃত্তাকার) and Rectangle(আয়তক্ষেত্রিক)
৫) Info Windows- map এর উপরে content গুলিকে popup balloon এর মধ্যে প্রদর্শন করে।
৬) Custom(প্রচলিত) overlays

Google Maps - Add a Marker(Google Map এ Marker যুক্তকরন)

Marker constructor একটি marker নির্মাণ করে । লক্ষ্য রাখতে হবে যে marker এর জন্য position property ঠিক করতে
হবে যেন সেটি প্রদর্শিত হয়।

setMap( ) পদ্ধতি দ্বারা map এ marker যুক্তকরনঃ
উদাহরনঃ
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);

Google Maps - Animate the Marker(Google Map এ Marker কে জীবন্তকরণ )
নিচের উদাহরণ টি দ্বারা দেখানো হয়েছে কিভাবে Google Map এ Marker কে জীবন্তকরণ করা হয়।
var marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

Google Maps - Icon Instead of Marker(Google Map এ Marker এর পরিবর্তে Icon ব্যাবহার)

উদাহরনঃ
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});

marker.setMap(map);

Google Maps - Polyline( Google Map এ Polyline এর ব্যাবহার)
Polyline হচ্ছে একটি line যেটি এক সারি স্থানাঙ্ক যা ক্রমধারা তে থাকে।

polyline নিম্নোক্ত properties অনুসরন করে।

১) path- এটি line এর স্থানাঙ্ক দ্বারা latitude/longitude নির্দেশ করে
২) strokeColor- এটি line এর জন্য hexadecimal color নির্দেশ করে যেমনঃ (এর ধরন : "#FFFFFF")
৩) strokeOpacity- এটি line এর অস্বচ্ছতা নির্দেশ করে । এর value 0.0 থেকে 1.0 এর মধ্যে হয়।
৪) strokeWeight- line এর weight কে pixel একক দ্বারা নির্দিষ্ট করে।
৫) editable- line টি ব্যাবহারকারী দ্বারা editable(পরিবর্তন যোগ্য) কিনা তা নির্ধারণ করে।

উদাহরনঃ
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});

Google Maps - Polygon(Google Map এ Polygon এর ব্যাবহার)

Polyline এর মত Polygon ও এক সারি সুবিন্যস্ত স্থানাঙ্ক দ্বারা গঠিত হয়। তবে Polygon কে এমন ভাবে রূপ দেয়া হয় যেন তা
closed loop এলাকা কে নির্দেশ করে ।
Polygon গুলি সোজা line দ্বারা তৈরি হয় এবং এটি "closed"।
Polygon নিম্নোক্ত properties অনুসরণ করেঃ
path- এটি line এর latitude/longitude স্থানাঙ্ক নির্দিষ্ট করে।(প্রথম এবং শেষ স্থানাঙ্ক একই হয়)
strokeColor- এটি line এর জন্য hexadecimal color নির্দিষ্ট করে । (এর ধরন : "#FFFFFF")
strokeOpacity- line এর অস্বচ্ছতা নির্দেশ করে । value 0.0 থেকে 1.0 এর মধ্যে হয়।
strokeWeight- line এর weight কে pixel একক দ্বারা নির্দিষ্ট করে।
fillColor- এটি একটি বদ্ধ এলাকার জন্য hexadecimal color নির্দিষ্ট করে । (এর ধরন : "#FFFFFF")
fillOpacity-এটি দ্বারা পরিপূর্ণ color এর অস্বচ্ছতা নির্দেশ করে। এর value 0.0 থেকে 1.0 এর মধ্যে হয়।
editable- line টি ব্যাবহারকারী দ্বারা editable(পরিবর্তন যোগ্য) কিনা তা নির্দেশ করে ।

উদাহরনঃ
var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});

Google Maps - Circle(Google Maps- বৃত্ত )

একটি Circle নিম্নোক্ত properties এ follow করে।
center- এটি google.map এর latitude/longitude কে circle এর কেন্দ্রে নির্দিষ্ট করে ।
radius- circle এর ব্যাসার্ধ কে meter একক এ প্রকাশ করে।
strokeColor - circle এর চারপাশের line টি hexadecimal color দ্বারা নির্দিষ্ট হয়। (এর ধরন : "#FFFFFF")
strokeOpacity- stroke color এর অস্বচ্ছতা নির্দিষ্ট করে। এর value 0.0 থেকে 1.0 এর মধ্যে হয়।
strokeWeight-line এর weight কে pixel একক দ্বারা নির্দিষ্ট করে ।
fillColor- circle এর ভিতরের এলাকার জন্য একটি hexadecimal color নির্দিষ্ট করে । (এর ধরন : "#FFFFFF")
fillOpacity- অভ্যন্তরীণ color এর অস্বচ্ছতা নির্দেশ করে। এর value 0.0 থেকে 1.0 এর মধ্যে হয়।
editable- এটি নির্দেশ করে যে circle টি ব্যাবহারকারী দ্বারা editable(পরিবর্তনযোগ্য) কিনা।

উদাহরণঃ
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});

Google Maps - InfoWindow(Google Map এ InfoWindow এর ব্যাবহার)
এটি marker এর কিছু text কে InfoWindow তে দেখায়।
উদাহরনঃ

var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

infowindow.open(map,marker);

Thank you for reading......

গুগল ম্যাপ কি?

গুগল ম্যাপ হলো গুগল কর্তৃক প্রচলিত ডেস্কটপ এবং মোবাইল ওয়েবের জন্য একটি ম্যাপিং অ্যাপ্লিকেশন এবং প্রযুক্তি সেবা যা স্যাটেলাইট থেকে তোলা ছবি, রাস্তার ম্যাপ এবং স্ট্রিট ভিউ পার্সপেক্টিভ এর সাথে সাথে গাড়ি, বাইসাইকেল এবং পায়ে হেটে চলা অথবা জনপরিবহণের উপযোগী রুট প্ল্যান (যাতায়াতের পথ) সরবরাহ করে।

গুগল ম্যাপ অ্যাপ্লিকেশনের মাধ্যমে আপনি আপনার ওয়েব সাইটে ম্যাপ দেখাতে পারবেন।

গুগল ম্যাপ এপিআই

এই টিউটোরিয়ালটিতে গুগল ম্যাপ API ( Application Programming Interface ) সম্পর্কে এবং ওয়েব সাইটে গুগল ম্যাপ যোগ করার ব্যাপারে আলোচনা করা হবে। গুগল ম্যাপ এপিআই আপনাকে ম্যাপকে কাস্টমাইজ এবং এটিতে তথ্য যোগ করতে দেয়। এখানে, একটি API হলো কতগুলো পদ্ধতি বা টুলের সমাহার যা সফটওয়্যার অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। গুগল ম্যাপ এপিআই এর মাধ্যমে ওয়েব ডেভলাপাররা বিভিন্ন পদ্ধতিতে ওয়েব পেজে ম্যাপ এমবেড বা যুক্ত করতে পারেন। বর্তমানে বিভিন্ন ধরণের ম্যাপ এপিআই প্রচলিত রয়েছে। এই টিউটোরিয়ালে সেগুলো সম্পর্কে আলোচনা করা হবে।

Go here to see a Google Maps of Dhaka, Bangladesh

https://www.google.ca/maps/place/Dhaka,+Bangladesh/@23.7806364,90.4193257,11z/data=!3m1!4b1!4m2!3m1!1s0x3755b8b087026b81:0x8fa563bbdd5904c2

গুগল ম্যাপের মৌলিক ধারণা
ইন্দ্র ভূষণ শুভ

একটি বেসিক গুগল ম্যাপ তৈরি করুন
এই উদাহরণটি ইংল্যান্ডের লন্ডন কেন্দ্রিক একটি গুগল ম্যাপ তৈরি করেঃ
উদাহরণ
DOCTYPE html>
<html>
<head>

<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
googleMap" style="width:500px;height:380px;">
</body>

</html>
নিজে চেষ্টা করুন >>
বাকি পেইজগুলো উপরের উদাহরণটিকে ধাপে ধাপে ব্যাখ্যা করবে।

১. গুগল এপিআই লোড করুন
গুগল ম্যাপের এপিআই হলো জাভাস্ক্রিপ্টের লাইব্রেরি। এটি একটি স্ক্রিপ্ট ট্যাগ দিয়ে একটি ওয়েব পেইজ যোগ করতে পারেঃ

২. ম্যাপের বৈশিষ্ট নির্ধারণ করুন
ম্যাপটি শুরু করার জন্য একটি ফাংশন তৈরি করুনঃ
function initialize() {
}
শুরুর ফাংশনটি, ম্যাপের বৈশিষ্টগুলো বর্ণনা করার জন্য একটি লক্ষ্য (mapProp) নির্ধারণ করেঃ
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
কেন্দ্র বৈশিষ্ট ম্যাপের কেন্দ্র নির্ধারণ করে। LatLng তৈরির উদ্দেশ্য একটি নির্দ্দিষ্ট বিন্দুতে কেন্দ্র নির্ধারণ করা। যাতে স্থানাঙ্ক অক্ষাংশ, দ্রাঘিমাংশ দিয়ে যায়।
জুমের বৈশিষ্ট ম্যাপের জুমের স্তর নির্ধারণ করে। জুমঃ০ একটি পৃথিবীর ম্যাপ দেখায় জুম ছাড়া। উচ্চ জুম স্তর উচ্চ রেজল্যুশনে জুম করে।
mapTypeId ম্যাপটি প্রদর্শনের ধরন নির্ধারণ করে।
নিম্নলিখিত ম্যাপগুলো সমর্থন করেঃ
রোডম্যাপ ( স্বাভাবিক, দ্বিমাত্রিক ম্যাপ )
স্যাটেলাইট ( ফটোগ্রাফিক ম্যাপ )
হাইব্রিড (ফটোগ্রাফিক ম্যাপ + শহর এবং রাস্তার নাম )
ভূখন্ড ( পাহাড়, নদী ইত্যাদি সম্বলিত ম্যাপ )

৩. ম্যাপের ধারক তৈরি করুন
ম্যাপ থাকে এমন একটি <div> উপাদান তৈরি করুন। CSS ব্যবহার করে উপাদানটির আকার তৈরি করুনঃ
উদাহরণ
googleMap" style="width:500px;height:380px;">
ম্যাপটি সবসময় এর ধারক উপাদান থেকে আকার পাবে।

৪. ম্যাপের লক্ষ্য তৈরি করুন
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
উপরের কোডটি

৫. ম্যাপ লোড করার একটি ইভেন্ট যোগ করুন
উইন্ডো লোডের initialize() ফাংশনকে চালাতে একটি DOM যোগ করা হয় (যখন পেইজটি লোড হয়)
google.maps.event.addDomListener(window, 'load', initialize);

অ্যাসিঙ্ক্রোনাস লোডিং
গুগল ম্যাপ এপিআই কে চাহিদানুযায়ী লোড করা সম্ভব।
নিচের উদাহরনটি পেইজ পুরোপুরি লোড হওয়ার পরে গুগল ম্যাপ এপআই লোড করতে window.onload ব্যবহার করেছে।
loadScript() ফাংশনটি গুগল ম্যাপ এপআই তে
উদাহরণঃ
function loadScript() {
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}

window.onload = loadScript;
নিজে চেষ্টা করুন >>
একাধিক ম্যাপ করুন
নিচের উদাহরনটি একই পেইজে চারটি ম্যাপ নির্ধারণ করে ( বিভিন্ন ধরনের চারটি ম্যাপ )
উদাহরণঃ
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);
নিজে চেষ্টা করুন >>

গুগল এপিআই কী
গুগল একই দিনে কয়েক হাজারবার আপনার ওয়েবসাইটকে গুগল এপিআই তে কল করতে দিবে।
আপনি অধিক ট্রাফিকের পরিকল্পনা করলে গুগল এপিআই থেকে বিনামুল্যে কী (Key) নিতে পারেন।
বিনামুল্যে কী পেতে https://console.developers.google.com এই সাইটে যান।
যখন একটি এপিআই লোড হয়, গুগল ম্যাপ Key পরিমাপকে একটি এপিআই Key আশা করেঃ
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>