כיצד להוסיף מפת גוגל לדף אינטרנט עם ממשק API

מאמר זה מסביר כיצד להכניס לדף האינטרנט שלך מפת גוגל עם סמן מיקום. תהליך זה כולל קבלת מפתח תוכנה מיוחד מגוגל ואז הוספת ה- JavaScript הרלוונטי לדף.

השג מפתח API של מפות Google

כדי להגן על השרתים מפני הפצצת בקשות למפות וחיפושי מיקום, גוגל מצערת גישה למסד הנתונים של מפות. עליך להירשם בגוגל כמפתח כדי להשיג מפתח ייחודי לשימוש בממשק תכנות היישומים כדי לבקש נתונים משרתי מפות. מפתח ה- API הוא בחינם אלא אם כן אתה זקוק לגישה כבדה לשרתי גוגל (למשל, לפיתוח אפליקציית אינטרנט).

לרישום מפתח ה- API שלך:

1. עבור אל קונסולת פלטפורמת הענן של גוגל ולאחר הכניסה לחשבון Google שלך, צור פרוייקט חדש או בחר פרויקט קיים.

2. נְקִישָׁה לְהַמשִׁיך כדי לאפשר את ה- API ואת כל השירותים הקשורים אליו.

3. על אישורים דף, קבל מפתח API. במידת הצורך, הגדר מגבלות רלוונטיות למפתח.

4. אבטח את מפתח ה- API שלך באמצעות שיטות עבודה מומלצות מומלצת על ידי גוגל.

הכנס את JavaScript לדף האינטרנט שלך

הכנס את הקוד הבא לדף האינטרנט שלך, בחלק BODY של מסמך ה- HTML:

// אתחל והוסף את פונקציית המפה initMap () {
// מיקום הדגל var flag = {lat: XXX, lng: YYY};
// המפה שבמרכזה הדגל var map = google.maps חדש. מפה (document.getElementById ('מפה'), {זום: 4, מרכז: דגל});
// הסמן, ממוקם בדגל var marker = google.maps חדש. סמן ({position: flag, map: map}); } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">

בקוד זה, שנה את הדברים הבאים:

• החלף דֶגֶל עם שם שמתייחס למיקום שאתה מצמיד. שמור על זה פשוט וקצר (כמו בית אוֹ מִשׂרָד אוֹ פריז אוֹ דטרויט). אתה יכול להריץ את הקוד הזה דֶגֶל כפי שהוא, אך שינוי השם תומך בשימוש חוזר בקוד זה באותו עמוד, כדי להטמיע כמה מפות שונות.
• החלף XXX ו YYY עם קו הרוחב והאורך, בעשרונים, של מיקום סמן המפה. עליך להחליף ערכים אלה כדי שהמפה תוצג כהלכה. דרך קלה למצוא את קו הרוחב והאורך היא לפתוח את מפות Google וללחוץ לחיצה ימנית על המיקום המדויק שאתה מתכוון לסמן. בתפריט ההקשר בחר מה פה? לצפייה בקו הרוחב ובאורך.
• החלף YOUR_API_KEY באמצעות מפתח ה- API שקיבלת מגוגל. אל תשים רווחים בין סימן השווה לחולשת האמפרס. ללא המפתח השאילתה תיכשל והמפה לא תוצג כהלכה.

שיטות אופטימליות

בראש מסמך ה- HTML שלך, ציין אילוצי CSS למפה, כולל גודל, צבעים ומיקום דף.

סקריפט המפה של גוגל מכיל תכונות כמו תקריב ו מֶרְכָּז שפתוחים לשינוי משתמשי קצה. טכניקה מתקדמת יותר זו נתמכת באמצעות תיעוד המפתחים של גוגל.

ממשק API של מפות Google הוא נכס רב ערך. הוראות השיטות המומלצות של גוגל מציעות עצות מצוינות לאבטחת המפתח מפני שימוש לרעה מצד אחרים. אבטחה נכונה רלוונטית במיוחד אם הגדרת מערכת תשלום עבור גישה ל- API, שכן אתה עלול להתמודד עם חשבון תלול אם האישורים שלך נגנבים. בפרט, הדוגמה שהראנו כאן עושה הטמע את מפתח ה- API ישירות בקוד - עשינו זאת לצורך הדגמת ההליך. אולם בסביבת ייצור עדיף לציין משתני סביבה למפתח במקום להכניס את המפתח ישירות.