သင့်ရဲ့ Web ကို 's Page တစ်ခုက Google မြေပုံထည့်သွင်းနည်း

by ဂျနီဖာ Kyrnin

05 ၏ 01

သင့်ရဲ့ဆိုက်ကိုတစ်ခုက Google Maps ကို API ကို Key ကိုရယူလိုက်ပါ

ကို Google Developers Console ၏ Cloud ကိုရှုမြင်။ J ကို Kyrnin အားဖြင့်ပစ်ခတ်မျက်နှာပြင်

သင့်ရဲ့ website မှာတစ်ဦးကို Google မြေပုံထည့်သွင်းဖို့အကောင်းဆုံးနည်းလမ်းက Google Maps ကို API ကိုသုံးစွဲဖို့ဖြစ်ပါတယ်။ နဲ့ Google ကိုသင်ပြမြေပုံများသုံးစွဲဖို့အမိန့်တစ်ခု API သော့ရအကြံပြုသည်။

သငျသညျကို Google Maps API ကို v3 ကိုအသုံးပြုရန်တစ်ဦး API သော့ရရှိရန်လိုအပ်ပေမယ့်သင့်ရဲ့အသုံးပြုမှုစောင့်ကြည့်ခြင်းနှင့်အပိုဆောင်း access များအတွက်ပေးဆောင်ပေးနိုင်ပါတယ်ကြောင့်အလွန်အသုံးဝင်မယ့်ကြသည်မဟုတ်။ Google Maps ကို API ကို v3 တစ်နေ့လျှင် 25,000 တောင်းဆိုမှုများကိုအများဆုံးမှအသုံးပြုသူတစ်ဦးလျှင်တစ်စက္ကန့် 1 တောင်းဆိုချက်အရတစ်ခွဲတမ်းရှိပါတယ်။ သင့်ရဲ့စာမျက်နှာများသူတွေကိုကန့်သတ်ကျော်လွန်ခဲ့လျှင်သင်ပိုမိုရနိုင်ဖို့အတွက်ငွေတောင်းခံ enable လုပ်ဖို့လိုအပ်ပါလိမ့်မယ်။

တစ်ဦးကို Google Maps API ကို Key ကိုဘယ်လိုသွားရမလဲ

သင်၏ Google အကောင့်ကို အသုံးပြု. Google မှ Login ။
အဆိုပါ Developers Console ကိုသွားပါ
စာရင်းကတဆင့် scroll နှင့် Google Maps ကို API ကို v3 ကိုရှာဖွေ, ထို့နောက်သူကဖွင့်ရန် "OFF" ခလုတ်ကိုကလစ်နှိပ်ပါ။
ဖတ်ရန်နှင့်စည်းကမ်းချက်များကိုသဘောတူသည်။
ယင်းတွင် API console ကိုသွားပြီးလက်ဝဲလက် menu ကနေ "API ကို Access ကို" ကိုရွေးချယ်ပါ
သည် "ရိုးရှင်းသော API ကို Access ကို" အပိုင်း၌, "အသစ်ကဆာဗာသော့ချက် Create ... " button ကို click လုပ်ပါ။
သင်၏ဝဘ်ဆာဗာ၏ IP address ကိုရိုက်ထည့်ပါ။ ဒါဟာသင့်ရဲ့ Maps ကိုတောင်းဆိုမှုများကနေလာမယ့်ပါလိမ့်မည်ရှိရာအိုင်ပီဖြစ်ပါတယ်။ သင်သည်သင်၏ IP လိပ်စာကိုမသိလျှင်, သင်ကတက်ကြည့်ရှုနိုင်ပါတယ်။
(ထိုခေါင်းစဉ်အပါအဝင်မဟုတ်) လိုင်း: က "API သော့" ပေါ်တွင်စာသားကူးယူပါ။ ဒါဟာသင့်ရဲ့မြေပုံအဘို့သင့် API သော့ဖြစ်ပါတယ်။

05 ၏ 02

သင့်ရဲ့လိပ်စာ Coordinates ပြောင်း

လတ္တီနှင့်လောင်ဂျီတွဒ်များအတွက်ညွှန်ပြနံပါတ်များကိုသုံးပါ။ J ကို Kyrnin အားဖြင့်ပစ်ခတ်မျက်နှာပြင်

သင်၏ဝဘ်စာမျက်နှာများပေါ်တွင် Google Maps ကိုသုံးစွဲဖို့အလို့ငှာ, သင်တည်နေရာလတ္တီတွဒ်နှင့်လောင်ဂျီတွဒ်ရှိသည်ဖို့လိုအပ်ပါတယ်။ သင်တစ်ဦး GPS စနစ်ကနေ, ဤရနိုင်သို့မဟုတ်သင်ပြောပြရန် Geocoder.us တူသောအွန်လိုင်းမှ tool ကိုသုံးနိုင်သည်။

Geocoder.us သွားပြီးရှာဖွေရေးအကွက်ထဲတွင်သင့်လိပ်စာရိုက်ထည့်။
(ရှေ့မှာရှိတဲ့အက္ခရာမပါဘဲ) လတ္တီတွဒ်များအတွက်ပထမဦးဆုံးအရေအတွက်ကကော်ပီကူးခြင်းနှင့်စာသားဖိုင်ထဲသို့ paste ။ သင်ကဒီဂရီ (º) ညွှန်ပြချက်မလိုအပ်ပါဘူး။
(နောက်တဖန်ရှေ့တွင်စာတစ်စောင်မပါဘဲ) ကိုလောင်ဂျီတွဒ်များအတွက်ပထမဦးဆုံးအရေအတွက်ကကော်ပီကူးခြင်းနှင့်သင်၏စာသားဖိုင်ထဲသို့ paste ။

သင့်ရဲ့လတ္တီကျူနှင့်လောင်ဂျီတွဒ်ဤကဲ့သို့သောအရာတစ်ခုခုကိုကြည့်ရှုမည်:

40.756076
-73,990838

Geocoder.us သာသင်သည်အခြားတိုင်းပြည်များတွင်သြဒီနိတ်ရရှိရန်လိုအပ်တယ်ဆိုရင်, သင်သည်သင်၏ဒေသတွင်အလားတူ tool ကိုရှာဖွေသင့်ပါတယ်, အမေရိကန်လိပ်စာများအဘို့အအလုပ်လုပ်ပါတယ်။

05 ၏ 03

သင့်ရဲ့ Web ကို 's Page မြေပုံထည့်သွင်းခြင်း

Google Maps ကို။ J ကို Kyrnin အားဖြင့်ပစ်ခတ်မျက်နှာပြင် - မြေပုံ image ကိုယဉ်ကျေး Google က

ပထမဦးစွာမှမြေပုံ Script Add

သင့်ရဲ့စာရွက်စာတမ်း၏

သင်၏ဝဘ်စာမျက်နှာကိုဖွင့်ပါနှင့်သင့် document ရဲ့ HEAD မှအောက်ပါအချက်များကိုထည့်ပါ။

သငျသညျခြေလှမ်းနှစ်ခုအတွက်ချရေးသားခဲ့သည်လတ္တီတွဒ်နှင့်လောင်ဂျီတွဒ်နံပါတ်များကိုရန်မီးမောင်းထိုးပြသောအဘို့ကိုပြောင်းပါ။

ဒုတိယအချက်အသင့်စာမျက်နှာမှမြေပုံ Element ကို Add

သင်သည်သင်၏စာရွက်စာတမ်း၏ HEAD မှဆက်ပြောသည်အပေါငျးတို့သ script ကိုဒြပ်စင်များနှင့်တပြိုင်နက်, သင်စာမျက်နှာပေါ်တွင်သင်၏မြေပုံနေရာချဖို့လိုအပ်ပါတယ်။ သင်ကအိုင်ဒီ = "map-ပတ္တူ" attribute ကိုအတူ div element ကဖြည့်စွက်အားဖြင့်ဒီလုပ်ပါ။ ငါသည်သင်တို့လည်းသင့်ရဲ့စာမျက်နှာပေါ်တွင် fit လိမ့်မည်ဟုရဲ့ width နဲ့ height နှင့်အတူဤ div style အကြံပြု:

နောက်ဆုံးအနေနဲ့လွှတ်တင်ခြင်းနှင့်စမ်းသပ်ခြင်း

လုပ်ဖို့နောက်ဆုံးအရာသည်သင်၏မြေပုံပြသမှုကြောင်းကိုသင်၏စာမျက်နှာနှင့်စမ်းသပ် upload ဖြစ်ပါတယ်။ ဤတွင်စာမျက်နှာပေါ်တွင်တစ်ဦးကို Google မြေပုံ၏ဥပမာတစ်ခုဖြစ်ပါတယ်။ သငျသညျမြေပုံပေါ်လာရမယ့် link ကို click နှိပ်ပြီးဖို့ရှိသည်လိမ့်မည်, အဘယ်ကြောင့်ဆိုသော် About.com CMS သို့အလုပ်လုပ်တယ်လမ်း, သတိပြုပါ။ ဒါဟာသင့်ရဲ့စာမျက်နှာပေါ်တွင်အမှုဖြစ်လိမ့်မည်မဟုတ်ပေ။

သင့်ရဲ့မြေပုံကိုဖွင့်မပြပါဘူးဆိုရင်, တစ်ဦး BODY attribute ကိုအတူကစတင်လုပ်ဆောင်ကြိုးစားကြ:

onload = ") (စတငျ">

သင့်ရဲ့မြေပုံပါဝင်သည် loading မပါလျှင်စစ်ဆေးအခြားအရာ:

အမှုအပါအဝင်သင့်ရဲ့ JavaScript ကိုအတွက်စာလုံးပေါင်းမှားယွင်းမှု, ရှာဖွေပါ။ JavaScript ကိုအမှုအထိခိုက်မခံဖြစ်ပါတယ်။
သငျသညျသတ်မှတ် zoom ကိုများနှင့်အလယ်ဗဟိုရွေးချယ်စရာရှိသည်သေချာအောင်လုပ်ပါ။
သင့်ရဲ့ div element ကမှန်ကန်သော ID ကိုအတူစာမျက်နှာပေါ်တွင်ကြောင်းသေချာအောင်လုပ်ပါ။
သင့်ရဲ့ div ဒြပ်စင်အမြင့်ရှိကြောင်းသေချာအောင်လုပ်ပါ။

05 ၏ 04

သင့်ရဲ့မြေပုံတစ်ခုမှတ်သားမှု Add

အမှတ်အသားနှင့်အတူ Google ကမြေပုံ။ J ကို Kyrnin အားဖြင့်ပစ်ခတ်မျက်နှာပြင် - မြေပုံ image ကိုယဉ်ကျေး Google က

သူတို့သွားသင့်ရှိရာလူဦးပြောပြခြင်းမရှိအမှတ်အသားလည်းမရှိလြှငျမူကားကောင်းသောအဘယ်အရာကိုသင့်တည်နေရာကိုမြေပုံပါသလဲ

စံ Google Maps ကိုအနီရောင်အမှတ်အသားကိုထည့်သွင်းဖို့ var မြေပုံကိုအောက်တွင်သင့် script ကိုအောက်ပါ add = ... လိုင်း:

var myLatlng = သစ်ကို google.maps.LatLng (မြောက်လတ္တီတွဒ်, လောင်ဂျီတွဒ်);
var အမှတ်အသား = သစ်ကို google.maps.Marker ({
အနေအထား: myLatlng,
မြေပုံ: မြေပုံ,
ခေါင်းစဉ်: "ဟောင်းများ About.com ဌာနချုပ်"
});

သင့်ရဲ့လတ္တီကျူနှင့်လောင်ဂျီတွဒ်နှင့်သင်ကလူညွှန်မှတ်ကိုကျော်ပျံဝဲသည့်အခါပေါ်လာချင်ပါတယ်ခေါင်းစဉ်ရန်မီးမောင်းထိုးပြစာသားမပြောင်းပါ။

သင်ကြိုက်နှစ်သက်သကဲ့သို့, စာမျက်နှာအဖြစ်အများအပြားအမှတ်အသားများ add ရုံသစ်ကိုသြဒီနိတ်နှင့်ခေါင်းစဉ်နှင့်အတူသစ်ကို variable တွေကို add ပေမယ့်မြေပုံအပေါငျးတို့သအမှတ်အသားများဖော်ပြရန်သေးငယ်လွန်းလျှင်စာဖတ်သူထွက် zooms မဟုတ်လျှင်, သူတို့ကမပြပါလိမ့်မယ်နိုငျသညျ။

= 2 အသစ်များကို google.maps.LatLng (37.3316591, -122.0301778) latlng var;
var myMarker = 2 အသစ်များကို google.maps.Marker ({
အနေအထား: 2 latlng,
မြေပုံ: မြေပုံ,
ခေါင်းစဉ်: "Apple က Computer ကို"
});

ဒီနေရာမှာတစ်ဦးအမှတ်အသားနှင့်အတူ Google ကမြေပုံ၏ဥပမာတစ်ခုဖြစ်ပါတယ်။ သငျသညျမြေပုံပေါ်လာရမယ့် link ကို click နှိပ်ပြီးရန်ရှိသည်ကြောင့် About.com CMS သို့အလုပ်လုပ်တယ်လမ်း, သတိပြုပါ။ ဒါဟာသင့်ရဲ့စာမျက်နှာပေါ်တွင်အမှုဖြစ်လိမ့်မည်မဟုတ်ပေ။

05 ၏ 05

သင့်စာမျက်နှာမှမြေပုံတစ်ဒုတိယအ (သို့မဟုတ်ပို) Add

သငျသညျအကြှနျုပျ၏ဥပမာမှာ Google ကမြေပုံစာမျက်နှာကိုကြည့်ရှုပါတယ် အကယ်. ငါစာမျက်နှာပေါ်တွင်ဖော်ပြပေးတဦးတည်းမြေပုံကိုထက်ပိုရှိသည်ကိုသတိပြုမိပါလိမ့်မယ်။ ဒီလိုလုပ်ဖို့အလွန်လွယ်ကူသည်။ ဤတွင်ဘယ်လိုပါပဲ။

သငျသညျကြှနျုပျတို့သညျဤသင်ခန်းစာ၏ခြေလှမ်း 2 မှာသင်ယူအဖြစ်ပြသချင်လူအပေါင်းတို့သည်မြေပုံ၏လတ္တီနှင့်လောင်ဂျီတွဒ်ကိုရယူပါ။
ကြှနျုပျတို့သညျဤသင်ခန်းစာ၏ခြေလှမ်း 3 သင်ယူအဖြစ်ပထမဦးဆုံးမြေပုံထည့်ပါ။ သငျသညျမြေပုံအမှတ်အသားရှိသည်ဖို့လိုလျှင်ခြေလှမ်း 4 မှာအဖြစ်အမှတ်အသားထည့်ပါ။
ဒုတိယမြေပုံအဘို့, သင်သည်သင်၏ Initiative () script ကို 3 အသစ်များကိုလိုင်းများကိုထည့်သွင်းရန်လိုအပ်မည်:
var latlng2 = သစ်ကို google.maps.LatLng (ဒုတိယသြဒီနိတ်);
var myOptions2 = {zoom ကို: 18, အလယ်ဗဟို: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map2 = သစ်ကို google.maps.Map (document.getElementById ( "map_canvas_2"), myOptions2);
သငျသညျလွန်းသစ်ကိုမြေပုံပေါ်တွင်တစ်ဦးအမှတ်အသားချင်လျှင်, ဒုတိယသြဒီနိတ်နှင့်ဒုတိယမြေပုံမှာညွှန်ပြနေတဲ့ဒုတိယအမှတ်အသားကိုထည့်သွင်း:
var myMarker2 = သစ်ကို google.maps.Marker ({အနေအထား: latlng2, မြေပုံ: map2, ခေါင်းစဉ်: "သင့်ရဲ့ညွှန်မှတ်ခေါင်းစဉ်"});
ထို့နောက်ဒုတိယ add
သငျသညျဒုတိယမြေပုံချင်ဘယ်မှာ။ ထိုသို့တစ်ဦးက id = "map_canvas_2" ID ကိုပေးစေခြင်းငှါသေချာပါစေ။
သင့်စာမျက်နှာဝန်နှစ်ခုမြေပုံများအားပြသပေးမှာလိုက်တဲ့အခါ

ဤတွင်ပေါ်မှာနှစ်ခု Google ကမြေပုံနှင့်အတူစာမျက်နှာ၏ကုဒ်ဖြစ်ပါသည်: