אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » jQuery Scripts » הצגת מפות עולמיות באמצעות jQuery ו-Google Maps

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

רן בר-זיק יולי 19, 2011 8:15 am 3 תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

לעתים יש צורך בתצוגה של שכבת מפות באתר שלך. לעתים זה נובע מהעובדה הפשוטה שאנו צריכים להציג מקום מסוים או נקודה גיאוגרפית מסוימת בפוסט שלנו. לעתים מדובר באתר מורכב שמציג אתרים גיאוגרפיים שונים. בעבר, הצגת נקודה כלשהי על מפה היתה בעייתית מאד. כיום, באמצעות 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 הישראלית שכן מאפשרות את זה – אבל נכון לעכשיו בגוגל אי אפשר.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ג'אווה סקריפט ו-jQuery באתרי אינטרנט

3 תגובות

  1. אברהם הגב אוגוסט 30, 2016 בשעה 12:12 pm

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

    • רן בר-זיק הגב אוגוסט 31, 2016 בשעה 3:47 pm

      המון תודה על התגובה! המאמר הזה כמובן בן 6 שנים כמעט וכמובן שהוא אינו עדכני.

  2. תמר הגב ינואר 27, 2022 בשעה 12:19 pm

    המאמר ממש ברור ומוסבר מצוין, רציתי לשאול האם נכון לעכשיו עדין אי אפשר להשתמש בישראל בgoogle maps api או שכבר אפשר?

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

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

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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