כיצד להטמיע מפת גוגל מגיבה באתר

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

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

עיצוב אתרים מגיב

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

לשם כך, האתר צריך להסתגל לרזולוציות שונות, לגדלי מסך ולגעת.

הטמעת מפת Google מגיבה באתר אינטרנט

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

השתמש בערכת נושא של וורדפרס כדי להטביע מפת Google מגיבה

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

1. בקר בדף זה באתר גוגל כדי להתחיל בתהליך ה- API.
2. בחר בלחצן הכחול התחל.
3. בחר בסמל התפריט של שלוש השורות בפינה השמאלית העליונה של המסך החדש.
4. בחר ממשקי API ושירותים ואז אישורים.
5. בחר באפשרות צור אישורים ואז מפתח API.
6. בחר הגבלת מקש ובחר מפנים HTTP.
7. בחר שמור.
8. העתק את מפתח ה- API והדבק אותו בדף אפשרויות העיצוב הדורש אותו.

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

השתמש בתוסף כדי להטביע מפת Google מגיבה

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

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

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

השתמש בקוד כדי להטביע מפת Google מגיבה

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

1. בקר במפות Google ונווט עד שהמפה שתרצה להציג תמלא את המסך.
2. בחר בקישור השיתוף הכחול והעתק את הקוד ממטבע המפה.
3. הוסף את קוד ההטמעה הספציפי שלך לקוד שלהלן בין לבין.
4. הוסף את הקוד ב- HTML של דף האינטרנט שלך איפה אתה רוצה לראות את המפה.
5. שמור את השינויים שלך.

הקוד:

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