מדריך API של מפות גוגל
API מאפשרת למחשב לקבל מידע רב משרת מרוחק בלי צורך להיכנס לקוד של האתר המרוחק. אחד ה-APIים המבוקשים במיוחד בקרב מפתחים הוא זה של גוגל, ובין ה-APIים הרבים שגוגל מציע ה-API של מפות גוגל, Google maps API , נחשב למבוקש במיוחד. כשעובדים עם ה-API אפשר לקבל מפה אוטומטית על בסיס קואורדינטות של אורך ורוחב, ניתן להוסיף מרקרים כדי להצביע על מיקום מסוים, ואפשר להאזין לאירועים כדי ליצור התנהגות דינאמית מעניינת דוגמת הצגת מידע נוסף בלחיצה על המרקר.
כך תראה המפה שנכין במדריך. לחצו על המרקר האדום כדי לראות התנהגות מועילה שנוסיף למפה לקראת סוף המדריך.
לפני שמתחילים, צריך להצטייד במפתח אישי (API key), שהוא מפתח ייחודי, שמשמש את גוגל כשהוא מזהה את האפליקציה שלכם. שלבי הוצאת המפתח כוללים:
-
כניסה עם חשבון הגוגל שלכם (מספיק שיש לכם חשבון Gmail כדי שיהיה לכם חשבון כזה) בכתובת:
https://accounts.google.com - אחרי הכניסה, הולכים לקונסולת המפתחים (Google developers console).
- כדי ליצור פרויקט חדש לוחצים על Create new project , ואז על Continue.
- הולכים לשורה שבה כתוב- Google Maps API v3 ולוחצים עליה כדי שתעבור ממצב OFF ל-ON.
- מתחת ל-Public API access מקליקים על Create new key כדי ליצור את המפתח האישי.
- בוחרים מהמפתחות את המפתח Browser key (האפליקציה מבוססת על js ורצה על הדפדפן), ושומרים את המפתח להמשך הדרך.
מפה בסיסית
את המפה ממקמים בתוך דיב ששמו mapDiv, שחייבים לתת לו ממדים של גובה ואורך.
<div id="mapDiv" style="width:500px;height:500px;"></div>
מוסיפים לתווית הסקריפט את המפתח שקבלנו מגוגל :
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"> </script>
יוצרים אובייקט עם תכונות המפה. במקרה זה, זום וקו אורך ורוחב.
// אובייקט תכונות המפה
var mapProp = {
zoom:12,
center:new google.maps.LatLng(32.8,35)
};
יוצרים את אובייקט המפה, ומעבירים לה כפרמטרים את הדיב ואת האובייקט שיצרנו בצעדים הקודמים.
// אובייקט הדיב שבתוכו יושבת המפה
var mapDiv = document.getElementById("googleMap");
// יצירת אובייקט המפה
var map=new google.maps.Map(mapDiv,mapProp);
וזה הקוד המלא:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="mapDiv" style="width:500px;height:500px;"></div>
<script src = "//maps.googleapis.com/maps/api/js?key=YOURֹֹֹֹ_API_KEY&sensor=true"></script>
<script>
var mapProp = {
zoom:12,
center: new google.maps.LatLng(32.8,35)
};
var mapDiv = document.getElementById("mapDiv");
// יצירת אובייקט המפה
var map = new google.maps.Map(mapDiv,mapProp);
</script>
</body>
</html>
הגדרת תכונות המפה
האובייקט mapProp מכיל את הגדרות המפה הרצויות לנו. לדוגמה, הגדרת קווי האורך והרוחב שבהם יימצא מרכז המפה, והזום.
var mapProp = {
zoom:12,
center: new google.maps.LatLng(32.8,35),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
כדי לשנות את סוג המפה משתמשים בתכונה mapTypeId, שערכה יכול להיות:
- ROADMAP - למפה רגילה.
- SATELLITE - מפה מבוססת צילומי לווין.
- HYBRID - שילוב של צילומי לווין עם מפה רגילה.
ניתן להגביל את רמת הזום שמותרת לגולש באמצעות minZoom ו-maxZoom. לדוגמה:
var mapProp = {
zoom: 12,
minZoom: 1,
maxZoom: 20,
center: new google.maps.LatLng(32.8,35),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
גוגל מציעה מספר קונטרולורים שמאפשרים לגולש לשלוט בתצוגת המפה:
- Zoom - שולט במיקום המפה.
- Pan - מאפשר למקם את המפה.
- MapType - מאפשר לעבור בין סוגי מפות (רגילה או לוויינית).
- Street View - מפעיל street view על המפה.
ניתן לבחור אם להציג או להסתיר את הקונטרולרים באמצעות ה-API.
מסתירים את כל הקונטרולרים באמצעות התכונה disableDefaultUI:
var mapProp = {
zoom:12,
minZoom: 1,
maxZoom: 20,
center: new google.maps.LatLng(32.8,35),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
ניתן לבחור אילו קונטרולרים להציג או להסתיר באמצעות הגדרת התכונות הבאות כ-false/true.
| התכונה | הקונטרולר | דוגמה |
|---|---|---|
| zoomControl | זום | zoomControl:true |
| scaleControl | הקונטרולר Pan | scaleControl:false |
| mapTypeControl | הקונטרולר של סוגי המפות | mapTypeControl:true |
| streetViewControl | קונטרולר street view | streetViewControl:false |
לדוגמה, אם נרצה להציג רק את הזום:
var mapProp = {
zoom: 12,
minZoom: 10,
maxZoom: 15,
center: new google.maps.LatLng(32.8,35),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl : true
};
הוספת מרקר
ניתן להוסיף מרקר למפה באמצעות קונסטרקטור ה-Marker. מגדירים את מיקום המרקר באמצעות התכונה position ואת המפה שבה יימצא המרקר באמצעות התכונה map. הוספתי לדוגמה title, כדי להדגים תכונה אופציונלית.
<script>
var mapCenter = new google.maps.LatLng(32.8,35);
var mapProp = {
zoom: 12,
minZoom: 10,
maxZoom: 15,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl : true
};
var mapDiv = document.getElementById("mapDiv");
var map = new google.maps.Map(mapDiv,mapProp);
// הוספת אובייקט מרקר על גבי המפה
var marker = new google.maps.Marker({
position: mapCenter,
map: map,
title: 'חיפה היפה'
});
</script>
הוספת חלון מידע
ניצור אובייקט חלון מידע באמצעות הקונסטרקטור InfoWindow, שנוסיף לו תוכן באמצעות התכונה content.
var infowindow = new google.maps.InfoWindow({
content:"חיפה היפה"
});
אפשר ליצור תוכן עשיר בחלון המידע על ידי הוספת אלמנטים של HTML, ובאמצעות הוספת הקוארדינטות של מיקום המרקר. את קואורדינטות המרקר נימצא באמצעות התכונה:
marker.position
כדי לקבל את קווי הרוחב:
marker.position.lat()
כדי לקבל את קווי האורך:
marker.position.lng()
כך נראה הקוד לחלון המידע שכולל את ה-HTML ואת המידע עבור קווי הרוחב והגובה:
var infoContent = "<div class='info-window'><h2>חיפה</h2><p>קו רוחב: "+marker.position().lat()+"</p><p>קו אורך: "+marker.position.lng()+"</p></div>";
// הוספת אובייקט חלון המידע
var infowindow = new google.maps.InfoWindow({
content: infoContent
});
אירועים
מפות גוגל יכולות להגיב לאירועים דוגמת לחיצה על המפה או על המרקר. בדוגמה, אני מראה כיצד לחיצה על המרקר גורמת להופעת חלון מידע.
כדי להאזין לאירוע הלחיצה מוסיפים מאזין לאירוע הקלקה על ה-marker:
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
האירוע שאנו מעוניינים ליזום הוא אירוע של פתיחת חלון המידע, וזאת באמצעות המתודה:
infowindow.open(map,marker);
שאנו מעבירים לה את האובייקטים map ו-marker.
וזה הקוד המלא כולל ה-HTML:
<!DOCTYPE html>
<html lang="he-IL">
<head>
<meta charset="utf-8">
<style>
.info-window{width:130px;height:120px;direction:rtl;text-align:right;}
#mapDiv{width:500px;height:500px;}
</style>
</head>
<body>
<!--הדיב שמחזיק את המפה-->
<div id="mapDiv"></div>
<script>
// מיקום המפה
var mapCenter = new google.maps.LatLng(32.8,35);
// תכונות המפה
var mapProp = {
zoom: 12,
minZoom: 10,
maxZoom: 15,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl : true
};
var mapDiv = document.getElementById("mapDiv");
// אובייקט המפה
var map = new google.maps.Map(mapDiv,mapProp);
// אובייקט מרקר על גבי המידע
var marker = new google.maps.Marker({
position: mapCenter,
map: map
});
var infoContent = "<div class='info-window'><h2>חיפה</h2><p>קו רוחב: "+marker.position.lat()+"</p><p>קו אורך: "+marker.position().lng()+"</p></div>";
// חלון המידע
var infowindow = new google.maps.InfoWindow({
content: infoContent
});
// מאזין ללחיצה על המרקר גורם להצגת חלונית המידע ולמיקוד המפה
infowindow.open(map,marker);
map.setZoom(mapProp.maxZoom);
});
// מאזין לארוע של לחיצה לסגירת המפה גורם למפה לחזור לזום המקורי
google.maps.event.addListener(infowindow,'closeclick',function(){
map.setZoom(mapProp.zoom);
});
</script>
</body>
</html>
בלחיצה על המרקר, אנו פותחים את חלון המידע וגם ממקדים את המפה לזום המקסימלי באמצעות המתודה:
map.setZoom(mapProp.maxZoom);
בלחיצה על חלון המידע כדי לסגור אותו, אני מחזירים את הזום לרמתו המקורית באמצעות הקוד הבא, שמאזין לאירוע closeclick של האובייקט infowindow.
google.maps.event.addListener(infowindow,'closeclick',function(){
map.setZoom(mapProp.zoom);
});
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.