Yadda za a Ƙara Taswirar Google zuwa Shafin yanar gizonku

01 na 05

Samo Fassarar API na Google Maps don shafinku

Hanya mafi kyau don ƙara shafin Google zuwa shafin yanar gizonku shine don amfani da Google Maps API. Kuma Google ya bada shawarar cewa ka sami maɓallin API don amfani da taswirar.

Ba a buƙatar ka sami maɓallin API don amfani da Google Maps API v3 ba, amma yana da matukar amfani kamar yadda yake baka damar saka idanu akan amfaninka kuma ka biya ƙarin damar shiga. Google Maps API v3 yana da ƙididdigar 1 buƙatun kowace lokaci ta kowane mai amfani har zuwa iyakar buƙatun 25,000 a kowace rana. Idan shafukanku sun wuce iyakokin da za ku buƙaci don kunna lissafin kuɗi don samun ƙarin.

Yadda za a samu Maballin API na Google Maps

1. Ku shiga Google ta amfani da asusunku na Google.
2. Je zuwa Cibiyar Turawa
3. Gungura cikin jerin kuma sami Google Maps API v3, sannan danna maballin "KASHE" don kunna shi.
4. Karanta kuma ka yarda da sharuddan.
5. Jeka zuwa ga APIs console kuma zaɓi "API Access" daga hannun hagu menu
6. A cikin "Simple API Access" section, danna kan "Ƙirƙiri sabon maɓallin Saiti ..." button.
7. Shigar da adireshin IP na uwar garken yanar gizonku. Wannan shi ne IP inda za a buƙatar Kalam ɗinku daga. Idan ba ku san adireshin IP naka ba, za ku iya duba shi.
8. Kwafi rubutu a "maɓallin API:" layi (ba tare da wannan taken) ba. Wannan shine maɓallin API don tashoshinku.

02 na 05

Maida Adireshinku don Tattaunawa

Domin amfani da Google Maps akan shafukan yanar gizonku, kuna buƙatar samun latitude da tsawon lokaci don wurin. Zaka iya samun waɗannan daga GPS ko zaka iya amfani da kayan aiki na kan layi kamar Geocoder.us don gaya maka.

1. Je zuwa Geocoder.us kuma a buga adireshin ku a akwatin bincike.
2. Kwafi lambar farko don latitude (ba tare da wasika a gaba) kuma manna shi a cikin fayil ɗin rubutu. Ba ku buƙatar digiri (º) alama.
3. Kwafi lambar farko don longitude (sake ba tare da wasika a gaba) da kuma manna shi cikin fayil ɗinku ba.

Your latitude da longitude za su duba wani abu kamar haka:

40.756076
-73.990838

Geocoder.us kawai yayi aiki don adiresoshin Amurka, idan kana buƙatar samun haɗin kai a wata ƙasa, ya kamata ka nema kayan aiki irin wannan a yankinka.

03 na 05

Ƙara Shafin zuwa shafin yanar gizonku

Na farko, Ƙara Shafin Map zuwa

na Takardunku

Bude shafin yanar gizon ku kuma ƙara da wadannan zuwa HEAD na rubutun ku.

Canja yankin da aka yi alama a cikin jerin latitude da longitude da kuka rubuta a mataki na biyu.

Na biyu, Ƙara Shafin Map zuwa ga Page

Da zarar kana da dukkan abubuwan rubutun da aka kara wa HEAD na rubutunka, kana buƙatar daidaita filinku a shafi. Kuna yin haka ta hanyar ƙara nauyin DIV tare da id = "siffar zane-zane". Ina ba da shawarar ku kuma kuna yin wannan sifa tare da nisa da tsawo wanda zai dace a kan shafinku:

A ƙarshe, Shiga da Gwaji

Abu na karshe da za a yi shine shigar da shafi naka kuma gwada gwajin ku. Ga misali na taswirar Google akan shafin. Lura, saboda hanyar da About.com CMS ke aiki, dole ne ka latsa mahadar don samun taswirar ya bayyana. Wannan ba shine batun a shafinku ba.

Idan taswirarku bai nuna sama ba, kokarin gwada shi tare da Sakamakon layi:

kangewa = "ƙaddamarwa ()" >

Wasu abubuwa da za a duba idan taswirarku ba a kunshi sun hada da:

• Bincika don ƙetare a cikin JavaScript, ciki har da harka. Jawabin Jagora ne batun ƙwarewa.
• Tabbatar cewa kana da zuƙowa da zaɓuɓɓukan cibiyar zabin.
• Tabbatar cewa lambar DIV tana cikin shafin tare da ID daidai.
• Tabbatar cewa kashi na DIV yana da tsawo.

04 na 05

Ƙara alamar alama a taswirarku

Amma yaya kyau taswirar wurinka idan babu alamar gaya wa mutane inda za su je?

Don ƙara misali na Google Maps ja alama ƙara da wadannan zuwa rubutunku a ƙasa da taswirar taswira = ... layi:

var myLatlng = sabon google.maps.LatLng ( latitude, longitude );
var marker = sabon google.maps.Marker ({
matsayi: myLatlng,
Taswirar: taswira,
title: " Tsohon About.com hedkwatar "
});

Canja rubutun da aka yi alama a kan latitude da longitude da kuma sunan da kake so ka bayyana a lokacin da mutane suka haɗu a kan alamar.

Zaka iya ƙara yawan alamomi zuwa shafin kamar yadda kake so, kawai ƙara sabon ƙididdiga tare da sababbin haɗin kai da lakabi, amma idan taswirar ya yi yawa ƙananan don nuna duk alamar, ba za su nuna ba sai dai idan mai karatu ya fara fita.

var latlng 2 = sabon google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = sabon google.maps.Marker ({
matsayi: latlng 2 ,
Taswirar: taswira,
title: " Apple Computer "
});

Ga misali na taswirar Google tare da alamar alama. Lura, saboda hanyar da About.com CMS ke aiki, dole ka danna mahadar don samun taswirar ya bayyana. Wannan ba shine batun a shafinku ba.

05 na 05

Ƙara Shafin Na Biyu (ko Ƙari) zuwa Page naka

Idan ka dubi alamina na Google maps za ka lura cewa ina da taswirar fiye da ɗaya a kan shafin. Wannan yana da sauqi a yi. Ga yadda.

1. Samun latitude da longitude na duk tashoshin da kake son nuna kamar yadda muka koya a mataki na 2 na wannan koyawa.
2. Shigar da taswirar farko kamar yadda muka koya a mataki na 3 na wannan koyawa. Idan kana so taswirar ta sami alama, ƙara alama kamar yadda a mataki na 4.
3. Ga taswirar na biyu, zaku buƙaci ƙara 3 sabbin layi zuwa rubutun farko ():
   var latlng2 = sabon google.maps.LatLng ( hadewa na biyu );
   var myOptions2 = {zuƙowa: 18, cibiyar: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = sabon google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Idan kana son alama a kan sabon taswira kuma, ƙara alama ta biyu a matsayi na biyu da kuma taswirar ta biyu:
   var myMarker2 = sabon google.maps.Marker ({matsayi: latlng2 , taswira: map2 , take: " Alamar Marker "});
5. Sa'an nan kuma ƙara na biyu

   inda kake so map na biyu. Kuma tabbatar da ba shi id = "map_canvas_2" ID.

6. Lokacin da shafukanka ke ɗauka, ɗakuna biyu za su nuna

A nan ne code na shafi tare da maps biyu na Google akan shi: