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

לעתים יש צורך בתצוגה של שכבת מפות באתר שלך. לעתים זה נובע מהעובדה הפשוטה שאנו צריכים להציג מקום מסוים או נקודה גיאוגרפית מסוימת בפוסט שלנו. לעתים מדובר באתר מורכב שמציג אתרים גיאוגרפיים שונים. בעבר, הצגת נקודה כלשהי על מפה היתה בעייתית מאד. כיום, באמצעות 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='http://www.internet-israel.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script> 
<script type='text/javascript' src='http://www.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 הישראלית שכן מאפשרות את זה – אבל נכון לעכשיו בגוגל אי אפשר.

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (2 הצבעות, ממוצע: 3.00 מתוך 5)


אל תשארו מאחור! יש עוד מה ללמוד!

2 comments on “הצגת מפות עולמיות באמצעות jQuery ו-Google Maps
  1. אברהם הגיב:

    כדאי לעדכן את המדריך.
    היום אין צורך בשום תוסף של JQUERY
    עם HTML5 גוגל עושה לך את כל העבודה.
    אתה רק מגדיר דיב למפות, מכניס את הסקריפט עם הAPI שלך ואתה מקבל מפה מעולה, עם כל היכולות ועם תצוגת לווין.
    עיין כאן: https://developers.google.com/maps/documentation/javascript/tutorial

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיק כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי
הטוויטר שלי
פרופיל הפייסבוק שלי
אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.

מאמרים אחרונים