Fomba hanampiana sarintany Google amin'ny pejy web anao

01 of 05

Hahazo ny Google Maps API ho an'ny tranokalanao

Ny fomba tsara indrindra hanampiana sarintany Google ho an'ny tranonkalanao dia ny fampiasana ny Google Maps API. Ary i Google dia manoro hevitra mba hahazoana ny fanalahidy API mba hampiasana ireo sarintany.

Tsy voatery hahazo ny fanalahidy API ianao mba hampiasa ny Google Maps API v3, fa tena ilaina tokoa izany satria mamela anao hanara-maso ny fampiasanao sy handoavana fidirana fanampiny. Google Maps API v3 dia manana quota iray avy amin'ny fangatahana 1 isan-tsegondra ho an'ny mpampiasa mihoatra ny 25.000 fangatahana isan'andro. Raha toa ka mihoatra ireo fetra ireo ny pejinao dia mila mandefa billing ianao mba hahazoana marimaritra kokoa.

Ahoana ny fomba hahazoana ny Key Maps API

1. Midira ao amin'ny Google amin'ny kaontinao Google.
2. Mandehana any amin'ny Console Consumer
3. Horohoro eo amin'ilay lisitra ary jereo ny Google Maps API v3, ary tsindrio ny bokotra "OFF" mba hamadika azy.
4. Vakio sy manaiky ny fepetra.
5. Mandehana any amin'ny Console API ary fidio ny "API Access" avy amin'ny sakafo eo ankavia
6. Ao amin'ny fizarana "API tsotra API Access", tsindrio ny bokotra "Create new server key ...".
7. Ampidiro ny adiresy IP amin'ny tranonkalanao. Ity no IP ahafahan'ny fangatahana Maps ho avy. Raha tsy mahafantatra ny adiresy IP ianao dia azonao jerena.
8. Ampiasao ilay andalana ao amin'ny tsipika "API key:" (tsy anisan'io lohateny io). Ity ny fanalahidin'ny API ho an'ny sarintany.

02 of 05

Amboary ny adiresinao amin'ny mpiandraikitra

Mba hampiasana ny Google Maps amin'ny pejy Internet anao, mila manana latitudes sy longitude amin'ny toerana ianao. Afaka mahazo azy ireo amin'ny GPS ianao na mampiasa fitaovana an-tserasera toy ny Geocoder.us hilaza aminao.

1. Mandehana any amin'ny Geocoder.us ary asio ny adiresinao ao anaty boaty.
2. Alefaso ny laharana voalohany ho an'ny latitude (tsy misy taratasy any aloha) ary ampidiro ao anaty rakitra an-tsoratra. Tsy ilainao ny mari-pana (º).
3. Alefaso ny laharana voalohany amin'ny lantihy (averina tsy misy taratasy aloha) ary ampidiro ao amin'ny rakitra an-tsoratra.

Ny latabatrao sy ny laharan-taratrao dia hijery toy izao:

40.756076
-73,990838

Geocoder.us dia miasa fotsiny ho an'ny adiresy Amerikana, raha ilaina ny mandrindra ny firenen-kafa, tokony hikaroka fitaovana toy izany ianao ao amin'ny faritra misy anao.

03 of 05

Ampio ny Sarintany ho an'ny pejy Internet

Voalohany, ampio ny sora-tanana amin'ny script

ny rakitrao

Sokafy ny pejin-tranonkalanao ary ampio amin'ny HEAD amin'ny rakitrao manaraka ireto manaraka ireto.

Ampiasao ny ampahany nasongadina amin'ny laharana malalaka sy lahatra izay nosoratanao tamin'ny dingana faharoa.

Faharoa, Hanampy ny Map Elements amin'ny pejy

Rehefa manana ny singa rehetra ao amin'ny script ianao ao amin'ny HEAD amin'ny rakitrao dia mila mametraka ny sarintany ao amin'ny pejy ianao. Manao izany ianao amin'ny fampidirana singa DIV miaraka amin'ilay id = "map-canvas". Manoro hevitra anao koa aho hanamboatra ity divy ity miaraka amin'ny habe sy ny haavony izay mety amin'ny pejy:

Farany, Upload and Test

Ny zavatra farany tokony hatao dia ny mandefa ny pejinao ary mijery ny sari-tany misy anao. Ity misy ohatra iray amin'ny sarintany Google eo amin'ny pejy. Mariho, noho ny asan'ny CMS momba ny CMS, ianao dia tsy maintsy mikitika rohy mba hahazoana ny sarintany. Tsy izany no mitranga ao amin'ny pejinao.

Raha toa ka tsy miseho ny sarinao, manandrama manombohana azy miaraka amin'ny toetra BODY:

onload = "initialize ()" >

Zavatra hafa hanamarina raha tsy ny fandefasana ny sarinao:

• Tadiavo ny fijanonana ao amin'ny JavaScript, anisan'izany ny raharaha. JavaScript dia miteraka olana.
• Ataovy azo antoka fa manana ny safidy zoom sy foibe ianao.
• Ataovy azo antoka fa eo amin'ny pejy misy ny ID ny DIV.
• Ataovy azo antoka fa manana ny halavany ny singa DIV.

04 of 05

Ampio marika eo amin'ny sarinao

Fa inona no tsara amin'ny sarintany misy anao raha tsy misy marika milaza ny olona tokony handehanany?

Hanampy marika mena Google Maps amin'ny marika mahazatra ianao dia ampidiro ao amin'ny scripto manaraka ny sarin'ny var = ... ...:

var myLatlng = vaovao google.maps.LatLng ( latitude, longitude );
var marker = new google.maps.Marker ({
toerana: myLatlng,
map: map,
lohateny: " Foiben-toerana teo aloha teo aloha "
});

Amboary ny lahatsoratra asongadina eo amin'ny latabatra sy ny laharan-dalamby ary ny lohateny tianao hipoitra rehefa miseho amin'ny olona ny marika.

Azonao ampidirina marika maromaro amin'ny pejy izay tianao, ampidiro fotsiny ny dikan-teny vaovao miaraka amin'ireo koordinate sy lohateny vaovao, fa raha kely loatra ny sarintany mba hampisehoana ireo marika rehetra, dia tsy hampiseho izy ireo raha tsy hivoaka ny mpamaky.

var latlng 2 = vaovao google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = new google.maps.Marker ({
toerana: latlng 2 ,
map: map,
Lohateny: " Apple Computer "
});

Ity misy ohatra iray amin'ny sarintany Google misy marika. Mariho, noho ny asan'ny CMS momba ny CMS, mila mametaka rohy ianao mba hahazoana ny sarintany. Tsy izany no mitranga ao amin'ny pejinao.

05 of 05

Hanampy karatra faharoa (na mihoatra) mankany amin'ny pejinao

Raha nijery ny sariitatra Google Maps ohatra ianao dia ho hitanao fa manana sarintany mihoatra ny iray hita ao amin'ny pejy. Tena mora izany. Toy izao.

1. Hahazo ny latitude sy ny laharan-dalan'ireo sarintany tianao hampisehoana araka ny nianarantsika tamin'ny dingana 2 amin'ity lesona ity.
2. Ampidiro ny sarintany voalohany araka ny nianarantsika tamin'ny dingana 3 amin'ity lesona ity. Raha tianao ny manana mari-pamantarana ny sarintany, ampio ny marika toy ny amin'ny dingana 4.
3. Ho an'ny sari-tany faharoa, mila ampidirinao amin'ny rindran'ny initialis () anao ianao:
   var latlng2 = vaovao google.maps.LatLng ( faharoa coordinates );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = vaovao google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Raha tianao ihany koa ny marika eo amin'ny sarintany vaovao dia ampio tsipika faharoa manondro ny fiovaovana faharoa sy ny sarintany faharoa:
   var myMarker2 = vaovao google.maps.Marker ({position: latlng2 , map: map2 , lohateny: " Ny marika taminao "});
5. Ampio ny faharoa

   izay tianao ny sarintany faharoa. Ary matokia ny hanomezana ID = "map_canvas_2" ID.

6. Rehefa mandefa ny pejy tianao dia hisy sarintany roa hipoitra

Ity ny code misy pejy ahitana karatra Google anankiroa: