Google Maps - Class 5 ek he map may multiple markers lgaein
Assalam o aleikum dosto... ye mera google maps ka 5th tutorial hy. Es class may hum ek he map may ek say ziada markers lgany k baray may seekhein gay.
Dosto google map google walon ki bnai hui ek API hy jo humy humari website k pages may google maps ko use karny deti hai, jesay apny dekha hoga k bht say businesses jesay k food resturaunts, banks ki websites may google map lga k btaya geya hota hy k resturaunt kahn hy to humari website k page may wo google map hum esi API ko use kar k lgaty hain.
Agar aapny pichlay lectures nahi aprhy to please aap pehly unko check karein kyu k es lecture may sirf info box pe focus karu ga. unki links es lecture k bilkul end pe di gae hain.
aksar humy es bat ki zarurat parti hy k hum ek he map may ek say ziada markers lgaein jesay k aap consider karein k humara koi resturaunt wghera hy or uski bht c branches hain ek he city may to unko hum ek he map lga k bta sakty hain k ek he city may wo kahn kahn hain. Ek say ziada markers lgana bht asan hy, hum simply marker ka object bnatay hain, ek say ziada bar, or un sab ko alag alag langitude or latitude ki locations de k ek he map ko assign kar dete hain.
dosto ye 3 alag alag markers k alag alag points hain:
var point1 = new google.maps.LatLng(31.553764, 74.358453);
var point2 = new google.maps.LatLng(31.556436, 74.362408);
var point3 = new google.maps.LatLng(31.558888, 74.366947);
ye hum 3 alag alag marker object bnaty hain:
var marker1 = new google.maps.Marker({position : point1,});
var marker2 = new google.maps.Marker({position : point2,});
var marker3 = new google.maps.Marker({position : point3,});
ab bus ek he map ko ye teeno assign kar dene hain or kam khatam:
marker1.setMap(map);
marker2.setMap(map);
marker3.setMap(map);
ye len pura code:
<!DOCTYPE html>
<html>
<head>
<title>google maps</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var point1 = new google.maps.LatLng(31.553764, 74.358453);
var point2 = new google.maps.LatLng(31.556436, 74.362408);
var point3 = new google.maps.LatLng(31.558888, 74.366947);
var myCenter = new google.maps.LatLng(31.557885,74.359675);
function initialize(){
var mapProp = {
center:myCenter,
zoom:15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap "), mapProp);
/*Markers*/
var marker1 = new google.maps.Marker({position : point1,});
var marker2 = new google.maps.Marker({position : point2,});
var marker3 = new google.maps.Marker({position : point3,});
marker1.setMap(map);
marker2.setMap(map);
marker3.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="height:500px;width:600px;margin:0 auto;border:1px solid red;"></div>
</body>
</html>
dosto es say ek he map ko 3 alag alag markers assign ho gye hain, umeed hy aapko ye tutorial bhi pasand aya hoga.
ye len mery pichly ITD k google maps k tutorials:
class1: Click Here
class2: Click Here
class3: Click Here
class4: Click Here
Reply With Quote
Zahidkpr said:
Bookmarks