ווי צו לייגן אַ Google מאַפּע צו דיין וועב זייַט

01 פון 05

באַקומען אַ Google מאַפּס אַפּי דורכפֿאַל פֿאַר דיין וועבזייַטל

דער בעסטער וועג צו לייגן אַ Google מאַפּע צו דיין וועבזייַטל איז צו נוצן Google Maps API. און Google רעקאַמענדז אַז איר באַקומען אַן API שליסל צו נוצן די מאַפּס.

איר טאָן ניט דאַרפֿן צו באַקומען אַ אַפּי שליסל צו נוצן Google Maps API v3, אָבער עס איז זייער נוציק ווי עס אַלאַוז איר מאָניטאָר דיין באַניץ און באַצאָלן פֿאַר נאָך צוטריט. גוגל מאַפּס אַפּי וו 3 האט אַ קוואָטע פון ​​1 בקשה פּער רגע פּער באַניצער צו אַ מאַקסימום פון 25,000 ריקוועס פּער טאָג. אויב דיין בלעטער יקסיד די לימאַץ איר דאַרפֿן צו געבן בילינג אין סדר צו באַקומען מער.

ווי צו באַקומען אַ Google מאַפּס אַפּי דורכפֿאַל

1. לאָגין צו Google ניצן דיין Google חשבון.
2. גיין צו די דעוועלאָפּערס קאַנסאָול
3. מעגילע דורך די רשימה און געפינען די Google מאַפּס אַפּי וו 3, דעמאָלט גיט די "אַוועק" קנעפּל צו דרייען עס אויף.
4. לייענען און שטימען צו די טערמינען.
5. גיין צו די אַפּיס קאַנסאָול און אויסקלייַבן "API Access" פון די לינקס-האַנט מעניו
6. אין דער "פּשוט אַפּי אַקסעס" אָפּטיילונג, גיט די "שאַפֿן נייַ שליסל שליסל ..." קנעפּל.
7. אַרייַן די IP אַדרעס פון דיין וועב סערווער. דאס איז די יפּ ווו דיין מאַפּס ריקוועס וועט קומען פון. אויב איר טאָן ניט וויסן דיין יפּ אַדרעס, איר קענען קוק עס אַרויף.
8. נאָכמאַכן די טעקסט אויף די "API שליסל:" שורה (נישט אַרייַנגערעכנט דעם טיטל). דעם איז דיין API שליסל פֿאַר דיין מאַפּס.

02 פון 05

קאָנווערט דיין אַדרעס צו קאָאָרדינאַטעס

צו נוצן Google Maps אויף דיין וועבזייטל, איר דאַרפֿן צו האָבן די ברייט און לאַנדזשאַטוד פֿאַר דעם אָרט. איר קענען באַקומען די פון אַ גפּס אָדער איר קענען נוצן אַ אָנליין געצייַג ווי Geocoder.us צו דערציילן איר.

1. גיין צו Geocoder.us און טיפּ דיין אַדרעס אין די זוכן קעסטל.
2. קאַפּירן די ערשטער נומער פֿאַר די ברייט (אָן אַ בריוו אין פראָנט) און פּאַפּ עס אין אַ טעקסט טעקע. איר טאָן ניט דאַרפֿן די גראַד (º) גראדן.
3. קאָפּי די ערשטער נומער פֿאַר די לאַנדזשאַטוד (ווידער אָן אַ בריוו אין פראָנט) און פּאַפּ עס אין דיין טעקסט טעקע.

דיין ברייט און לאַנדזשאַטוד וועט קוקן עפּעס ווי דאָס:

40.756076
-73.990838

Geocoder.us נאָר מעשים פֿאַר יו. עס. ווענדט, אויב איר דאַרפֿן צו באַקומען די קאָואָרדאַנאַץ אין אן אנדער לאַנד, איר זאָל זוכן אַ ענלעך געצייַג אין דיין געגנט.

03 פון 05

אַדדינג די מאַפּע צו דיין וועב זייַט

ערשטער, לייג די מאַפּע סקריפּט צו די

פון דיין דאָקומענט

עפענען דיין וועב בלאַט און לייגן די פאלגענדע צו די קאָפּ פון דיין דאָקומענט.

טוישן די כיילייטיד חלק צו די ברייט און לאַנדזשאַטוד נומערן איר געשריבן אַראָפּ אין שריט צוויי.

צווייטע, לייג די מאַפּע עלעמענט צו דיין בלאַט

אַמאָל איר האָבן אַלע די שריפט עלעמענטן מוסיף צו די קאָפּ פון דיין דאָקומענט, איר דאַרפֿן צו פּאָסטן דיין מאַפּע אויף די בלאַט. איר טאָן דעם דורך אַדינג אַ DIV עלעמענט מיט די שייַן = "מאַפּע-לייַוונט" אַטריביוט. איך רעקאָמענדירן איר אויך סטיל דעם דיוו מיט די ברייט און הייך וואָס וועט פּאַסיק אויף דיין בלאַט:

צום סוף, צופֿעליקער און טעסט

די לעצטע זאַך צו טאָן איז צופֿעליקער דיין בלאַט און פּרובירן אַז דיין מאַפּע דיספּלייז. דאָ איז אַ בייַשפּיל פון אַ Google מאַפּע אויף דעם בלאַט. באַמערקונג, ווייַל פון די וועג די About.com CMS אַרבעט, איר וועט האָבן צו גיט אַ לינק צו באַקומען די מאַפּע צו דערשייַנען. דעם וועט ניט זיין דער פאַל אויף דיין בלאַט.

אויב דיין מאַפּע טוט נישט ווייַזן אַרויף, פּרובירן ינישאַלייזינג עס מיט אַ באָדי אַטריביוט:

אָנלאָזן = "ינישאַלייז ()" >

אנדערע זאכן צו קאָנטראָלירן אויב דיין מאַפּע איז נישט אַרייַנגערעכנט אַרייַננעמען:

• קוקן פֿאַר טיפּאָס אין דיין דזשאַוואַסקריפּט, אַרייַנגערעכנט פאַל. דזשאַוואַסקריפּט איז פאַל שפּירעוודיק.
• מאַכן זיכער אַז איר האָבן די פארגרעסער און צענטער אָפּציעס.
• מאַכן זיכער אַז דיין דיוו עלעמענט איז אויף די בלאַט מיט די ריכטיק שייַן.
• מאַכן זיכער אַז דיין דיוו עלעמענט האט אַ הייך.

04 פון 05

לייגן אַ מאַרקער צו דיין מאַפּע

אבער וואָס גוט איז אַ מאַפּע פון ​​דיין פּלאַץ אויב עס איז קיין מאַרקער טעלינג מענטשן ווו זיי זאָל גיין?

צו לייגן אַ נאָרמאַל Google מאַפּס רויט מאַרקער לייגן די פאלגענדע צו דיין שריפט אונטער די var map = ... שורה:

var myLatlng = new google.maps.LatLng ( latitude, longitude );
var marker = new google.maps.Marker ({
שטעלע: myLatlng,
מאַפּע: מאַפּע,
טיטל: " Former About.com Headquarters "
});

טוישן די כיילייטיד טעקסט צו דיין ברייט און לאַנדזשאַטוד און די טיטל איר'ד ווי צו ווייַזן ווען מענטשן האָווער איבער די מאַרקער.

איר קענען לייגן ווי פילע מארקפלעצער צו די בלאַט ווי איר ווילט, נאָר לייגן נייַ וועריאַבאַלז מיט נייַע קאָואָרדאַנאַץ און טיטלען, אָבער אויב די מאַפּע איז אויך קליין צו אַרויסווייַזן אַלע די מאַרקערס, זיי וועלן נישט ווייַזן אויב דער לייענער זאָמז אויס.

var latlng 2 = new google.maps.LatLng ( 37.3316591, -122.0301778 );
איר מיימאַרקער 2 = נייַ google.maps.Marker ({
שטעלע: latlng 2 ,
מאַפּע: מאַפּע,
טיטל: " עפּל קאמפיוטער "
});

דאָ איז אַ בייַשפּיל פון אַ Google מאַפּע מיט אַ מאַרקער. באַמערקונג, ווייַל פון די וועג די About.com CMS אַרבעט, איר האָבן צו גיט אַ לינק צו באַקומען די מאַפּע צו דערשייַנען. דעם וועט ניט זיין דער פאַל אויף דיין בלאַט.

05 פון 05

לייג אַ צווייטע (אָדער מער) מאַפּע צו דיין זייַט

אויב איר'ווע געקוקט אין מיין בייַשפּיל Google מאַפּס בלאַט איר וועט באַמערקן אַז איך האָבן מער ווי איין מאַפּע געוויזן אויף דעם בלאַט. דאָס איז זייער גרינג צו טאָן. דאָ ס ווי.

1. באַקומען די ברייט און לאַנדזשאַטוד פון אַלע די מאַפּס איר ווילן צו אַרויסווייַזן ווי מיר געלערנט אין שריט 2 פון דעם טוטאָריאַל.
2. אַרייַננעמען די ערשטער מאַפּע ווי מיר געלערנט אין שריט 3 פון דעם טוטאָריאַל. אויב איר ווילן די מאַפּע צו האָבן אַ מאַרקער, לייגן דעם מאַרקער ווי אין שריט 4.
3. פֿאַר די צווייטע מאַפּע, איר דאַרפֿן צו לייגן 3 נייַע שורות צו דיין ינישאַנאַלייז () שריפט:
   var latlng2 = new google.maps.LatLng ( second coordinates );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. אויב איר ווילן אַ מאַרקער אויף די נייַ מאַפּע אויך, לייגן אַ צווייט מאַרקער ווייזט בייַ די רגע קאָאָרדינאַטעס און די צווייטע מאַפּע:
   איר מיימאַרקער 2 = נייַ google.maps.Marker ({position: latlng2 , map: map2 , טיטל: " דיין מאַרקער טיטל "});
5. דעריבער לייגן די רגע

   ווו איר ווילן די רגע מאַפּע. און זיין זיכער צו געבן עס אַ שייַן = "מאַפּס_קאַנוואַס_2" שייַן.

6. ווען דיין בלאַט לאָודז, צוויי מאַפּס וועט אַרויסווייַזן

דאָ איז דער קאָד פון אַ בלאַט מיט צוויי גוגל מאַפּס אויף עס: