Jinsi ya kuongeza Ramani ya Google kwenye Ukurasa wa Wavuti Yako

01 ya 05

Pata Muhimu wa Google Maps API kwa Tovuti Yako

Njia bora ya kuongeza ramani ya Google kwenye tovuti yako ni kutumia Google Maps API. Na Google inapendekeza uweze kupata ufunguo wa API ili utumie ramani.

Hunahitajika kupata ufunguo wa API kutumia Google Maps API v3, lakini ni muhimu sana kwa inakuwezesha kufuatilia matumizi yako na kulipa upatikanaji wa ziada. Google Maps API v3 ina punguzo la ombi la 1 kwa kila pili kwa mtumiaji kwa maombi ya juu ya 25,000 kwa siku. Ikiwa kurasa zako zizidi mipaka hiyo unahitaji kuwezesha kulipa ili uweze kupata zaidi.

Jinsi ya kupata Kitufe cha Google Maps API

1. Ingia kwa Google ukitumia akaunti yako ya Google.
2. Nenda kwa Wasanidi programu
3. Tembea kupitia orodha na upate Google Maps API v3, kisha bofya kitufe cha "OFF" ili kugeuka.
4. Soma na ubaliane na masharti.
5. Nenda kwenye console ya API na uchague "Upatikanaji wa API" kutoka kwenye orodha ya kushoto
6. Katika sehemu "Rahisi ya Upatikanaji wa API", bofya kitufe cha "Fungua kitufe cha salama cha Siri ...".
7. Ingiza anwani ya IP ya seva yako ya wavuti. Hii ni IP ambayo maombi yako ya Ramani yatatoka. Ikiwa hujui anwani yako ya IP, unaweza kuiangalia.
8. Nakala maandishi kwenye "ufunguo wa API:" mstari (usiojumuisha jina hilo). Huu ndio ufunguo wako wa API kwa ramani zako.

02 ya 05

Badilisha Anwani Yako kwa Kuratibu

Ili utumie Google Maps kwenye kurasa zako za wavuti, unahitaji kuwa na urefu na longitude kwa eneo. Unaweza kupata hizi kutoka GPS au unaweza kutumia chombo cha mtandaoni kama Geocoder.us kukuambia.

1. Nenda kwa Geocoder.us na uingie kwenye anwani yako katika sanduku la utafutaji.
2. Nakala namba ya kwanza ya usawa (bila barua mbele) na kuiweka kwenye faili ya maandishi. Huna haja ya kiashiria (º).
3. Nakala namba ya kwanza ya longitude (tena bila barua mbele) na kuiweka katika faili yako ya maandishi.

Unda na longitude wako utaangalia kitu kama hiki:

40.756076
-73.990838

Geocoder.us inafanya kazi kwa anwani za Marekani, ikiwa unahitaji kupata kuratibu katika nchi nyingine, unapaswa kutafuta chombo sawa katika eneo lako.

03 ya 05

Kuongeza Ramani kwenye Ukurasa wa Wavuti Yako

Kwanza, Ongeza Hati ya Ramani kwenye

ya Hati yako

Fungua ukurasa wako wa wavuti na uongeze zifuatazo kwa HEAD ya waraka wako.

Badilisha sehemu iliyotajwa kwenye namba za umbali na umbali ulizoandika chini ya hatua mbili.

Pili, Ongeza kipengee cha Ramani kwenye ukurasa wako

Mara baada ya kuwa na vipengele vyote vya script vilivyoongezwa kwenye HEAD ya hati yako, unahitaji kuweka ramani yako kwenye ukurasa. Unafanya hili kwa kuongeza kipengele cha DIV na sifa ya id = "ramani-turu". Ninapendekeza pia utengeneze div hii na upana na urefu ambao utafaa kwenye ukurasa wako:

Hatimaye, Weka na Upimaji

Kitu cha mwisho cha kufanya ni kupakia ukurasa wako na mtihani kwamba ramani yako inaonyesha. Hapa ni mfano wa ramani ya Google kwenye ukurasa. Kumbuka, kwa sababu ya kazi ya CSS About.com, utahitaji kiungo ili kupata ramani ili kuonekana. Hii haiwezi kuwa kwenye ukurasa wako.

Ikiwa ramani yako haionyeshe, jaribu kuifungua kwa sifa ya BODY:

onload = "initialize ()" >

Mambo mengine ya kuangalia kama ramani yako haipakia ni pamoja na:

• Angalia typos kwenye JavaScript yako, ikiwa ni pamoja na kesi. JavaScript ni nyeti ya kesi.
• Hakikisha kuwa una chaguo la kupanua na cha kati.
• Hakikisha kuwa kipengele chako cha DIV kina kwenye ukurasa na ID sahihi.
• Hakikisha kwamba kipengele chako cha DIV kina urefu.

04 ya 05

Ongeza alama kwenye Ramani yako

Lakini ramani ya eneo lako ni nzuri kama hakuna alama ya kuwaambia watu wapi wanapaswa kwenda?

Ili kuongeza alama ya kawaida ya Google Maps nyekundu kuongeza zifuatazo kwenye script yako chini ya var ramani = ... line:

var myLatlng = mpya google.maps.LatLng ( latitude, longitude );
var marker = mpya google.maps.Marker ({
msimamo: myLatlng,
ramani: ramani,
jina: " Makao makuu ya zamani ya About.com "
});

Badilisha maandishi yaliyotambulishwa kwa usawa na longitude wako na kichwa unayotaka kuonekana wakati watu wanakuja juu ya alama.

Unaweza kuongeza alama nyingi kwenye ukurasa kama unavyopenda, tu kuongeza vigezo vipya kwa kuratibu mpya na majina, lakini kama ramani ni ndogo sana ili kuonyesha alama zote, hazitaonyesha isipokuwa msomaji atafuta.

var latlng 2 = google.maps.LatLng mpya ( 37.3316591, -122.0301778 );
var myMarker 2 = mpya google.maps.Marker ({
msimamo: latlng 2 ,
ramani: ramani,
jina: " Apple Computer "
});

Hapa ni mfano wa ramani ya Google yenye alama. Kumbuka, kwa sababu ya kazi ya CSS About.com, unabonyeza kiungo ili kupata ramani ili kuonekana. Hii haiwezi kuwa kwenye ukurasa wako.

05 ya 05

Ongeza Ramani ya Pili (au Zaidi) kwenye ukurasa wako

Ikiwa umeangalia ukurasa wangu wa ramani za Google, utaona kuwa nina ramani zaidi ya moja iliyoonyeshwa kwenye ukurasa. Hii ni rahisi sana kufanya. Hapa ndivyo.

1. Pata latitude na longitude ya ramani zote unayotaka kuonyesha kama tulivyojifunza katika hatua ya 2 ya mafunzo haya.
2. Weka ramani ya kwanza kama tulivyojifunza katika hatua ya tatu ya mafunzo haya. Ikiwa unataka ramani kuwa na alama, ongeza alama kama katika hatua ya 4.
3. Kwa ramani ya pili, utahitaji kuongeza mistari mitatu mpya kwa kuanzisha () script yako:
   var latlng2 = mpya google.maps.LatLng ( kuratibu za pili );
   var myOptions2 = {zoom: 18, kati: latlng2, ramaniTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = mpya google.maps.Map (document.getElementById ("ramani_canvas_2"), myOptions2);
4. Ikiwa unataka alama kwenye ramani mpya pia, ongeza alama ya pili inayoonyesha kwenye kuratibu za pili na ramani ya pili:
   var myMarker2 = mpya google.maps.Marker ({msimamo: latlng2 , ramani: ramani2 , kichwa: " Kichwa chako cha Marker "});
5. Kisha kuongeza pili

   ambapo unataka ramani ya pili. Na hakikisha kuwapa ID = "ramani_canvas_2" ID.

6. Wakati ukurasa wako unapobeba, ramani mbili zinaonyesha

Hapa ni kanuni ya ukurasa na ramani mbili za Google juu yake: