הצגת מפות עולמיות באמצעות jQuery ו-Google Maps

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

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

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

קבלת מפתח API
קבלת מפתח API

אחרי האישור, תגיעו לדף הסבר עם מספר ה-API, תגללו לחלק של JavaScript Maps API Example ותעתיקו את כתובת הסקריפט:

העתקת הסקריפט
העתקת הסקריפט

כל מה שנותר זה לשנות את הפרמטר true_or_false ל-true בקטע שהעתקתם. את הסקריפט הזה אתם מציבים בדף שלכם, בראש העמוד:


<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAHum4yVL_3ogBM6_sSNfcDBQDoMChSem5vN-KCHFJ64qMmR-oDxTMwSZoSB5Rxq8a_0tsax8MXnKRxQ" type="text/javascript"></script>

עכשיו אפשר לבחור תוספים של jQuery להצגת המפות.

ישנם לא מעט תוספים של jQuery שמאפשרים הצגה של מפות באמצעות Google Maps. אני בחרתי בתוסף של Shawn mauzes שהוא אחד התוספים הטובים לפי דעתי. ראשית, אנו נוריד את jQuery ואת התוסף ונכניס את תגיות ה-JavaScript בראש העמוד:


<script type='text/javascript' src='https://internet-israel.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script> 
<script type='text/javascript' src='https://internet-israel.com/internet_files/javascript/jquery.googlemaps.pack.1.01.js'></script> 

את קובץ ה-jQuery אנו מורידים מאתר jQuery ואת קובץ התוסף אנו מורידים מאתר התוסף.

אחרי כן, אנו מציבים div מסוים באתר שלנו על מנת שיכיל את המפה. למשל


<div id="my_map"></div>

חשוב שיהיה ל-div הזה id ייחודי משלו. עכשיו – להפעלת הסקריפט! אנחנו נכניס מתחת לסקריפטים שהצבנו תגית script כזו:


<script type="text/javascript">
$(document).ready(function() {

//הקוד שלנו ייכנס לכאן

 });
</script>

רואים את ההערה 'הקוד שלנו ייכנס לכאן'? זה המקום שבו אנו נכתוב את הקוד שלנו. זה שיפעיל את המפה. ישנם דוגמאות בדף התוסף, הדוגמא הבסיסית ביותר היא:


$('#map_canvas').googleMaps(); 

זה יציג בפנינו את המפה באופן חי. רוצים דוגמה? הכנסו לדף הזה.

אפשר כמובן להיות יותר מתוחכמים (תלוי בתוסף) – שימו לב למשל לקריאה יותר מתוחכמת הכוללת גם מיקוד של המפה בכתובת:


$(document).ready(function() { 
		$('#map_canvas').googleMaps({
		geocode: 'Parc du Champ de Mars, 5 Avenue Anatole France, 75007 Paris, France'
	}); 
}); 

מזהים את הכתובת? מדובר במגדל אייפל! הנה הדוגמא שלנו.

Google Maps וישראל

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

פוסטים נוספים שכדאי לקרוא

פיתוח ב-JavaScript

Axios interceptors

תכנון נכון של קריאות AJAX באפליקציה ריאקטית וניהול השגיאות או ההצלחות עם פיצ׳ר נחמד של axios

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

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

פתרונות ומאמרים על פיתוח אינטרנט

רינדור של קליינט סייד עם SSR

הסבר קצר על SSR מול רינדור קלאסי ולא. לא תמיד זה טוב להשתמש בו. אין כדור כסף שיכול לפתור הכל.

גלילה לראש העמוד