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

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 ל HEAD של המסמך, עליך למקם את המפה שלך בדף. אתה עושה זאת על ידי הוספת אלמנט DIV עם התכונה id = "map-canvas". אני ממליץ לך גם סגנון זה div עם רוחב וגובה שיתאים בדף שלך:

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

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

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

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

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

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

04 מתוך 05

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

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

כדי להוסיף סורק אדום רגיל של מפות Google, הוסף את הסקריפט הבא אל מתחת למפה var = ... line:

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

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

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

var latlng 2 = new google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = new google.maps.Marker ({
מיקום: latlng 2 ,
מפה: מפה,
הכותרת: " מחשב אפל "
});

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

05 מתוך 05

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

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

1. קבל את רוחב קו האורך של כל המפות שאתה רוצה להציג כפי שלמדנו בשלב 2 של הדרכה זו.
2. הכנס את המפה הראשונה כפי שלמדנו בשלב 3 של הדרכה זו. אם אתה רוצה שהמפה תהיה בעלת סמן, הוסף את הסמן כמו בשלב 4.
3. עבור המפה השנייה, יהיה עליך להוסיף 3 שורות חדשות לכתב האתחול ():
   var latlng2 = חדש 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 , מפה: Map2 , כותרת: " כותרת הסמן שלך "});
5. לאחר מכן להוסיף את השני

   שבו אתה רוצה את המפה השנייה. ואל תשכח לתת לו מזהה id = "map_canvas_2".

6. כאשר הדף נטען, יוצגו שתי מפות

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