Google Maps - Class 4 Marker Per info Box lgana
Assalam o aleikum dosto... ye mera google maps ka 4rth tutorial hy or g han google maps may or bhi kuch hain mgar bai cheesein aksar bilkul bhi kam nahi ati unko bilkul bhi use nahi kia jata or ziada tar cheesein bas khelny k lye he hain.....
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.
90% say ziada websites jin may aap google maps lgaein gay un may aap map per marker lga k infor box lga k farig ho jaein gay es say ziada kam nahi hota google maps ka.... esky elava kabhi kabhi hum ye zarurat par jati hy k hum ksi website may ek say ziada bar maps lgaein.. jo humara next lecture hy....nichay pictures may aap marker per info box lga dekh sakty hain.
es lecture may hum humary map per humny jo marker lgaya hy usper info box lgany k baray may seekhein gay...
Map may marker lgany k baad behtar hota hy hum ye bhi bta dein k asal may ye jagah hy kia.. beshak jis business say related website may aap lga rahy hain us say ye to smjh aa he jaye ga mgar es say user ka experience acha rahy ga or user per ek acha tassur paray ga..
Info box marker ek uper ek choti sa box hota hy jis may ye likha hota hy k ksi marker per map bnanay waly k kia comments hain, ye jagah ka naam bhi ho sakta hy ya koi lambi chori line bhi. mgar aapko may salah yehi dun ga k aap 2 4 words say ziada na likhein us say user experience bht he bura ho jata hy..
info box bnanay k lye hum bilkul marker ka tarika he follow karty hain sab say pehly info box object bnaya jata hy phr usay marker say attach ya associate kr dia jata hy..
var infowindow = new google.maps.InfoWindow({
content:"We're here!!"
});
ye info box object bnanay ka code hy..yahn per may ny "We're here!!" line use ki hy aap kuch bhi use kar le mgar behtar hy 2 4 words say ziada na use karein.. ab bas hum apny map may mojood marker say esko attach ya associate kar dein gay or kam khatam.
infowindow.open(map,marker);
or es say ab info box humary map may mojood marker say associate ho gya hy.. nichay pictures may aap dekh sakty hain k humara result ab bht behtar lag rha hy...
ye lijiye pura code:
<!DOCTYPE html>
<html>
<head>
<title>google maps</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
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);
var marker=new google.maps.Marker({
position:myCenter,
});
var infowindow = new google.maps.InfoWindow({
content:"We're here."
});
infowindow.open(map,marker);
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="height:500px;width:600px;margin:0 auto;"></div>
</body>
</html>
Google maps k pichlay lectures lectures:
1-Introduction: Lecture 1
2-Apni Marzi ki Location lgana: Lecture 2
3-Map may Marker Lgana: Lecture 3
Reply With Quote
Bookmarks