Bawo ni lati Fi Map Google kan si oju-iwe ayelujara rẹ

01 ti 05

Gba Google API Key fun Aye rẹ

Ọna ti o dara ju lati fi aaye Google kan si aaye ayelujara rẹ ni lati lo Google Maps API. Ati Google ṣe iṣeduro pe ki o gba bọtini API kan lati lo awọn maapu.

A ko nilo lati ni bọtini API lati lo Google Maps API v3, ṣugbọn o wulo pupọ bi o ti jẹ ki o ṣe akiyesi ifarahan rẹ ati sanwo fun afikun wiwọle. Google Maps API v3 ni ibeere ti 1 beere fun keji fun olumulo kọọkan si iye ti 25,000 fun ọjọ kan. Ti awọn oju-iwe rẹ ba kọja awọn ifilelẹ lọ ti o yoo nilo lati ṣe atunṣe ìdíyelé lati gba diẹ sii.

Bi o ṣe le ni Google Key API Key

1. Wọle si Google nipa lilo akọọlẹ Google rẹ.
2. Lọ si Awọn Idaniloju Awọn Olumulo
3. Yi lọ nipasẹ akojọ naa ki o wa Google Maps API v3, ki o si tẹ bọtini "PA" lati tan-an.
4. Ka ati gba awọn ofin naa.
5. Lọ si apamọ API ati ki o yan "Access API" lati inu akojọ aṣayan-osi
6. Ni "Simple API Access" apakan, tẹ lori "Ṣẹda titun bọtini Server ..." bọtini.
7. Tẹ adiresi IP ti olupin ayelujara rẹ. Eyi ni IP nibiti awọn ibeere kaadi rẹ yoo wa lati. Ti o ko ba mọ adiresi IP rẹ, o le wo o.
8. Da ọrọ naa kọ lori "bọtini API:" laini (kii ṣe pẹlu akọle naa). Eyi ni bọtini API fun awọn maapu rẹ.

02 ti 05

Yipada Adirẹsi Rẹ lati Ṣiṣẹpọ

Lati le lo Google Maps lori oju-iwe ayelujara rẹ, o nilo lati ni latitude ati longitude fun ipo naa. O le gba awọn wọnyi lati ọdọ GPS tabi o le lo ọpa ori ayelujara kan bi Geocoder.us lati sọ fun ọ.

1. Lọ si Geocoder.us ki o si tẹ ninu adirẹsi rẹ ninu apoti idanimọ.
2. Da nọmba nọmba akọkọ fun latitude (laisi lẹta kan ni iwaju) ki o si lẹẹmọ rẹ sinu faili ọrọ kan. O ko nilo aami-ami (º).
3. Da nọmba akọkọ fun ijinlẹ (lẹẹkansi laisi lẹta kan ni iwaju) ki o si lẹẹmọ rẹ sinu faili ọrọ rẹ.

Rẹ latitude ati longitude yoo wo nkankan bi eyi:

40.756076
-73.990838

Geocoder.us nikan ṣiṣẹ fun awọn adirẹsi US, ti o ba nilo lati gba awọn ipoidojuko ni orilẹ-ede miiran, o yẹ ki o wa iru ọpa irin-ajo ni agbegbe rẹ.

03 ti 05

Fifi Map kun oju-iwe ayelujara rẹ

Akọkọ, Fi Ikọju Kalẹnda sii si

ti Iwe Rẹ

Ṣii oju-iwe ayelujara rẹ ki o si fi eyi ti o tẹle si HEAD ti iwe rẹ.

Yi ipin ti a ṣe afihan si apakan awọn nọmba ti agbegbe ati awọn ijinle ti o kọ silẹ ni igbese meji.

Keji, Fi Map naa kun si oju-iwe rẹ

Lọgan ti o ba ni gbogbo awọn akọọlẹ akosile ti a fi kun si ỌBA ti iwe rẹ, o nilo lati gbe map rẹ si oju-iwe naa. O ṣe eyi nipa fifi nkan DIV kan kun pẹlu id = "attributable" -fasi ". Mo ṣe iṣeduro pe o tun ṣe ami yii pẹlu iwọn ati giga ti yoo dara lori oju-iwe rẹ:

Ni ikẹhin, Gbe si ati Igbeyewo

Ohun ikẹhin lati ṣe ni po si oju-iwe rẹ ati idanwo pe awọn ifihan ipo-ilẹ rẹ. Eyi jẹ apeere ti map Google lori oju-iwe naa. Akiyesi, nitori ti ọna About.com CMS ṣiṣẹ, iwọ yoo ni lati tẹ ọna asopọ kan lati gba map lati han. Eyi kii yoo jẹ ọran lori oju-iwe rẹ.

Ti map rẹ ko ba farahan, gbiyanju lati ṣagbekale rẹ pẹlu ẹda ti ỌBA:

onload = "initialize ()" >

Awọn ohun miiran lati ṣayẹwo ti map rẹ ko ba ni ikojọpọ ni:

• Wa fun idiwọ ninu JavaScript rẹ, pẹlu ọran. JavaScript jẹ idaabobo idi.
• Rii daju pe o ni awọn sun-un ati awọn aṣayan aarin ti a ṣeto.
• Rii daju pe Ẹri DIV rẹ wa lori oju-iwe pẹlu ID to tọ.
• Rii daju pe ipin DIV rẹ ni iga.

04 ti 05

Fi bukumaaki si Map rẹ

Ṣugbọn kini o dara jẹ maapu ti ipo rẹ ti ko ba si ami ti o n sọ eniyan ni ibi ti o yẹ ki wọn lọ?

Lati ṣe afikun ami-aṣẹ pupa Google Maps ti o fẹlẹfẹlẹ fi awọn wọnyi si iwe-akọọlẹ rẹ ni isalẹ ipo iyatọ = ... laini:

var myLatlng = google.maps.LatLng ( latitude, longitude );
var marker = google.maps.Marker ({
ipo: MyLatlng,
map: map,
akọle: " Ogbo ile Nipa About.com "
});

Yi ọrọ ti a ṣe afihan si ipo rẹ ati ijinlẹ ati akọle ti o fẹ lati han nigbati awọn eniyan ba kọja lori apẹẹrẹ.

O le fi awọn aami-ami pupọ kun si oju-iwe bi o ṣe fẹ, o kan fi awọn oniyipada tuntun kun pẹlu awọn ipoidojuko titun ati awọn akọle, ṣugbọn ti map ba kere ju lati fi gbogbo awọn aami-ami han, wọn kii yoo fi afihan ti oluka naa ba jade.

var latlng 2 = google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = google.maps.Marker ({
ipo: latlng 2 ,
map: map,
akọle: " Apple Computer "
});

Eyi jẹ apẹẹrẹ ti map Google kan pẹlu ami-ọwọ kan. Akiyesi, nitori ti ọna About.com CMS ṣiṣẹ, o ni lati tẹ ọna asopọ kan lati gba map lati han. Eyi kii yoo jẹ ọran lori oju-iwe rẹ.

05 ti 05

Fi aworan keji (tabi Die) sii si oju-iwe rẹ

Ti o ba ti wo awọn apẹẹrẹ awọn aworan oju-iwe Google mi ti iwọ yoo ṣe akiyesi pe Mo ni map ju ọkan lọ loju-iwe. Eyi jẹ gidigidi rọrun lati ṣe. Eyi ni bi.

1. Gba awọn latitude ati ijinlẹ ti gbogbo awọn maapu ti o fẹ lati han bi a ti kẹkọọ ni Igbese 2 ti yi tutorial.
2. Fi kaadi maapu akọkọ sii bi a ti kọ ni igbesẹ 3 ti ẹkọ yii. Ti o ba fẹ map lati ni ami, fi ami sii bi ni igbesẹ 4.
3. Fun map keji, iwọ yoo nilo lati fi awọn ila tuntun 3 kun si akọsilẹ akọkọ rẹ ():
   var latlng2 = google.maps.LatLng ( ipoidojuko keji );
   var myOptions2 = {zoom: 18, aarin: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Ti o ba fẹ aami lori maapu tuntun naa, fi aami ami aami keji han ni awọn ipoidojuko keji ati map keji:
   var myMarker2 = google.maps.Marker ({ipo: latlng2 , map: map2 , akọle: " Akọle Akọle Rẹ "});
5. Lẹhinna fi keji sii

   nibi ti o fẹ map aye keji. Ki o si rii daju pe o fun ni id = "map_canvas_2" ID.

6. Nigbati awọn ẹrù iwe rẹ, awọn maapu meji yoo han

Eyi ni koodu ti oju-iwe kan pẹlu awọn maapu Google meji lori rẹ: