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

הצגת מפות ישראליות עם waze

רן בר-זיק אוגוסט 14, 2011 7:48 am אין תגובות

ה-API של גוגל מפות לא תומך בישראל? לא נורא, כך תציגו מיקומים על גבי מפה ישראלית עם Waze!

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

במאמר שבו הדגמתי כיצד לעבוד עם Google Maps עם jQuery, הראיתי כיצד ישראל היא המדינה היחידה בעולם (חוץ מצפון קוריאה) שבה אי אפשר להשתמש ב-Google maps API על מנת להציג מפות. כלומר אם אתם חשבתם על תצוגה גיאוגרפית של מקומות בישראל באתר שלכם/אפליקציה שלכם – אז תחשבו שוב. בגלל כל מיני בעיות של זכויות יוצרים אין מפות של גוגל בישראל. אני מקווה שחברת 'מפה', שאחראית להגבלה הזו מרוצה.

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

על מנת להשתמש ב-API של waze צריך להרשם לשירות שלהם. נכנסים לקישור הבא, ממלאים את הפרטים ולחצים על Get it now. מיד נגיע לדף שבו ניתן לנו מפתח ארוך ומסובך. את המפתח הזה ניקח ונשתמש בו. באתר של waze יש דוגמאות קוד נהדרות – הנה דוגמא לקוד כזה. כפי שאתם רואים זו מפה של ישראל. איך הקוד הזה עובד? מאד פשוט: ראשית אנו יוצרים div כלשהו עם id מסוים כדי שיכיל את המפה שלנו ואחרי כן ניצור את הקריאה ל-API עם המפתח שלנו ולבסוף נכלול סקריפט מנדטורי.


<div id="map" style="width: 500px; height: 300px; position: relative; background-color: rgb(229, 227, 223); "></div>
<script type="text/javascript">
		g_waze_config = {
			div_id:"map", //id of the div that contains the map, must have width and height defined
			locale : "israel",//locale of the map, for now only 'israel' is supported
			center_lon:34.79000,//center of the map longitude
			center_lat:32.08600,//center of the map latitude
			zoom:2,//zoom level of the map (0-10 supported)
			token:'32adf3ab-4297-4f60-adb2-2cf4a39bb5ae'//your waze token
		};
</script>
<script type="text/javascript" src="http://www.waze.co.il/js/WazeEmbeddedMap.js"></script>

לא נדרשת הבנה גדולה במיוחד ב-JavaScript בשביל להבין מה קורה פה, גם ההערות שהוצבו על ידי אנשי waze מאד עוזרות להבין מה קורה פה. קל לראות שעל ידי קבלת longitude ו-latitude אפשר להתפקס על כל מקום בארץ.

מציאת כתובות

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

הדבר הכי טוב הוא עם דוגמה. למשל הדף הזה.

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


<script type="text/javascript">
<!--
	g_waze_config = {
		div_id:"map",
		locale : "israel",
		zoom:8,
		token:"32adf3ab-4297-4f60-adb2-2cf4a39bb5ae",
		alt_base_layer:"israel_colors",
		alt_map_servers:"http://ymap1.waze.co.il/wms-c/",
		callback:onInit
	};
-->
</script>

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


			function onInit(){
				var map = g_waze_map.map;


				//search API example, calls 'find_callback' when search returns
				g_waze_map.find('קרן היסוד בת ים','find_callback');
				g_waze_map.find('השבטים 12 בת ים','find_callback');
			};

מתודת find מקבלת שני ערכים – אחר מה לחפש (כתובת אקראית כלשהי שהקלדתי) ואיזה callback להריץ מיד אחרי שהתוצאות מתקבלות. שם ה-callback הוא find_callback.

פונקצית find_callback פשוט מדפיסה את הכל על המסך:


			function find_callback(response){
				var map = g_waze_map.map;
				var first_result = response[0];
				var lonlat = new OpenLayers.LonLat(first_result.location.lon,first_result.location.lat);
				g_waze_map.map.setCenter(lonlat);
				var size = new OpenLayers.Size(36,47);
				var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
				var icon = new OpenLayers.Icon('https://internet-israel.com/internet_files/javascript/simpleicon.jpg',size,offset);
				var markers = new OpenLayers.Layer.Markers( "Markers" );
				map.addLayer(markers);
				markers.addMarker(new OpenLayers.Marker(lonlat,icon));
				map.addPopup(new OpenLayers.Popup.FramedCloud("test",lonlat,null,
							"
"+first_result.name+"
", anchor=null,true,null)); };

וזה הכל! אפשר לעשות עוד הרבה דברים עם waze, כולל לכתוב ממש על המפה ולהציב אייקונים שונים ומשונים בצבעים שונים. אבל זה הבסיס.

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

השארת תגובה

ביטול

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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