כיצד להוסיף מפת Google לדף אינטרנט עם מפתח API

Friday of 05

קבל מפתח API של מפות Google עבור האתר שלך

הדרך הטובה ביותר להוסיף מפת Google לאתר שלך היא להשתמש בממשק API של מפות Google. Google ממליצה שתקבל מפתח API כדי להשתמש במפות.

אינך נדרש לקבל מפתח API כדי להשתמש ב- API של מפות Google v3, אך הוא שימושי מאוד שכן הוא מאפשר לך לעקוב אחר השימוש שלך ולשלם עבור גישה נוספת. ל- API של מפות Google v3 יש מכסה של בקשה אחת לשנייה לכל משתמש, עד 25,000 בקשות ביום לכל היותר. אם הדפים שלך חורגים ממגבלות אלה, עליך להפעיל את החיוב כדי לקבל יותר.

כיצד לקבל מפתח API של מפות Google

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

02 מתוך 05

המר את הכתובת שלך לקואורדינטות

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

1. עבור אל Geocoder.us והקלד את הכתובת בתיבת החיפוש.
2. העתק את המספר הראשון של קו הרוחב (ללא אות מקדימה) והדבק אותו לקובץ טקסט. אין צורך במדד התואר (º).
3. העתק את המספר הראשון של קו האורך (שוב ללא אות מקדימה) והדבק אותו בקובץ הטקסט.

קו האורך וקו האורך שלך ייראו כך:

40.756076-73.990838

Geocoder.us פועל רק עבור כתובות בארה"ב, אם עליך לקבל את הקואורדינטות במדינה אחרת, עליך לחפש כלי דומה באזור שלך.

03 מתוך 05

הוספת המפה לדף האינטרנט שלך

ראשית, הוסף את סקריפט המפה אל

של המסמך שלך

פתח את דף האינטרנט שלך והוסף את הפריטים הבאים ראש של המסמך שלך.

שנה את החלק המודגש למספרי קווי הרוחב והאורך שכתבת בשלב 2.

שנית, הוסף את אלמנט מפה אל הדף שלך

ברגע שיש לך את כל רכיבי script נוסף ראש של המסמך שלך, עליך למקם את המפה שלך בדף. אתה עושה זאת על ידי הוספת DIV אל id = "מפה-בד" תכונה. אני ממליץ לך גם סגנון זה div עם רוחב וגובה שיתאים בדף שלך:

לבסוף, העלה ובדוק

הדבר האחרון שיש לעשות הוא להעלות את הדף שלך ולבדוק את המפה שלך מציג. הנה דוגמה למפת Google בדף. שים לב, בשל האופן שבו פועלת חברת About.com CMS, יהיה עליך ללחוץ על קישור כדי להציג את המפה. זה לא יהיה המקרה בדף שלך.

אם המפה שלך אינה מופיעה, נסה לאתחל אותה באמצעות a BODY תכונה:

onload = "אתחול ()" >

דברים אחרים לבדוק אם המפה שלך אינה נטענת כוללים:

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

04 מתוך 05

הוסף סמן למפה שלך

אבל מה טוב הוא מפה של המיקום שלך אם אין סמן אומר לאנשים לאן הם צריכים ללכת?

כדי להוסיף סמן אדום סטנדרטי של מפות Google, הוסף את הסקריפט הבא אל מתחת ל var map = … שושלת you

var myLatlng = new google.maps.LatLng ( קווי אורך ורוחב );var marker = google.maps.Marker חדש ({מיקום: myLatlng,מפה: מפה,כותרת:" מטה about.com לשעבר '});

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

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

var נ"צ 2 = 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 ( הקואורדינטות השנייה );var myOptions2 = {zoom: 18, center: latlng2, MapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = google.maps.Map חדש (document.getElementById ("map_canvas_2"), myOptions2);
4. אם אתה רוצה גם סמן על המפה החדשה, הוסף סמן שני המצביע על הקואורדינטות האחרות והמפה השנייה:var myMarker2 = new google.maps.Marker ({מיקום: latlng2 , map map2 , כותרת:" כותרת הסמן שלך ' });
5. לאחר מכן הוסף את המקום השני שבו אתה רוצה את המפה השנייה. ו להיות בטוח לתת את זה id = "map_canvas_2" מזהה.
6. כאשר הדף נטען, יוצגו שתי מפות

הנה קוד של דף עם שתי מפות Google על זה: