החל מ-26 במאי 2021, גרסה 2 של Maps JavaScript API לא זמינה יותר. כתוצאה מכך, המפות בגרסה 2 של האתר יפסיקו לפעול ויחזירו שגיאות JavaScript. כדי להמשיך להשתמש במפות באתר, צריך לעבור לממשק API של JavaScript במפות Google גרסה 3. המדריך הזה יעזור לכם בתהליך.
סקירה כללית
תהליך ההעברה של כל אפליקציה יהיה שונה במקצת, אבל יש כמה שלבים שתקפים לכל הפרויקטים:
- לקבל מפתח חדש. בממשק API של JavaScript במפות Google נעשה עכשיו שימוש במסוף Google Cloud לניהול מפתחות. אם אתם עדיין משתמשים במפתח מגרסה 2, חשוב לקבל את מפתח ה-API החדש לפני שמתחילים את ההעברה.
- עדכון ה-Bootstrap של ה-API רוב האפליקציות יטענו את Maps JavaScript API v3 באמצעות הקוד הבא:
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
- עדכון הקוד מידת השינוי הנדרשת תלויה מאוד באפליקציה שלכם. שינויים נפוצים כוללים:
- תמיד צריך להפנות למרחב השמות google.maps. בגרסה 3, כל הקוד של ממשק ה-API של JavaScript במפות Google מאוחסן במרחב השמות
google.maps.*
במקום במרחב השמות הגלובלי. שם רוב האובייקטים השתנה גם כן במסגרת התהליך הזה. לדוגמה, במקום GMap2
, עכשיו צריך לטעון את google.maps.Map
.
- מסירים התייחסויות לשיטות לא תקפות. הוסרו מספר שיטות שירות כלליות, כמו
GDownloadURL
ו-GLog
.
צריך להחליף את הפונקציונליות הזו בספריות שירות של צד שלישי, או להסיר את ההפניות האלה מהקוד.
- (אופציונלי) מוסיפים ספריות לקוד. הרבה מהתכונות הועברו לספריות שירות חיצוניות, כך שכל אפליקציה תצטרך לטעון רק את החלקים של ה-API שבהם היא תשתמש.
- (אופציונלי) מגדירים את הפרויקט כך שישתמש ב-externs של v3.
אפשר להשתמש ב-externs של גרסה 3 כדי לאמת את הקוד באמצעות Closure Compiler, או כדי להפעיל השלמה אוטומטית בסביבת הפיתוח המשולבת (IDE).
מידע נוסף על
פירושים מתקדמים ו-externs
- בדיקה וחזרה על התהליך בשלב הזה עדיין תצטרכו לבצע כמה פעולות, אבל החדשות הטובות הן שאתם כבר בדרך לאפליקציית מפות Google בגרסה 3.0.
שינויים בגרסה 3 של Maps JavaScript API
לפני שתתחילו לתכנן את ההעברה, כדאי להקדיש זמן להבנת ההבדלים בין הגרסה השנייה של ממשק ה-API של JavaScript במפות Google לבין הגרסה השלישית שלו. הגרסה החדשה ביותר של Maps JavaScript API נכתבה מחדש, עם דגש על שיטות תכנות מודרניות של JavaScript, שימוש מוגבר בספריות וממשק API פשוט יותר.
הוספנו הרבה תכונות חדשות ל-API, וחלק מהתכונות המוכרות השתנו או הוסרו. בקטע הזה נסקור כמה מההבדלים העיקריים בין שתי הגרסאות.
חלק מהשינויים ב-API בגרסה 3 כוללים:
- ספריית ליבה יעילה. הרבה מהפונקציות המשלימות הועברו לספריות, כדי לצמצם את זמני הטעינה והניתוח של Core API, וכך לאפשר למפה להיטען במהירות בכל מכשיר.
- שיפור הביצועים של כמה תכונות, כמו עיבוד מצולעים ומיקום סמנים.
- גישה חדשה למגבלות השימוש בצד הלקוח, כדי להתאים טוב יותר כתובות משותפות שמשמשות שרתים proxy בניידים וחומת אש ארגונית.
- הוספנו תמיכה בכמה דפדפנים מודרניים ובדפדפנים לנייד. התמיכה ב-Internet Explorer 6 הוסרה.
- הוסרו רבות מהכיתות העזר לשימוש כללי (
GLog
או
GDownloadUrl
). כיום יש הרבה ספריות JavaScript מעולות שמספקות פונקציונליות דומה, כמו Closure או jQuery.
- הטמעה של Street View ב-HTML5 שתטען בכל מכשיר נייד.
- תמונות פנורמיות בהתאמה אישית של Street View עם תמונות משלכם, שמאפשרות לכם לשתף תמונות פנורמיות של מסלולי סקי, בתים למכירה או מקומות מעניינים אחרים.
- התאמות אישיות של מפות בסגנון שמאפשרות לשנות את תצוגת הרכיבים במפה הבסיסית כך שתתאים לסגנון החזותי הייחודי שלכם.
- תמיכה בכמה שירותים חדשים, כמו ElevationService ו-Distance Matrix.
- שירותי מסלולים משופרים מספקים מסלולים חלופיים, אופטימיזציה של מסלולים (פתרונות משוערים ל
בעיית איש המכירות הנודד), מסלולי אופניים (עם
שכבת אופניים), מסלולי תחבורה ציבורית ו
מסלולים שניתן לגרור.
- פורמט מעודכן של יצירת כתובות שמספק מידע מדויק יותר לגבי הסוג מאשר הערך
accuracy
מ-Geocoding API v2.
- תמיכה במספר חלונות מידע במפה אחת
המפתח החדש
בממשק API של JavaScript במפות Google בגרסה 3 נעשה שימוש במערכת מפתחות חדשה מגרסה 2. יכול להיות שכבר משתמשים באפליקציה במפתח v3, ואז לא צריך לבצע שינויים. כדי לוודא זאת, צריך לבדוק את הפרמטר key
בכתובת ה-URL שממנה אתם טוענים את Maps JavaScript API. אם ערך המפתח מתחיל ב-'ABQIAA', אתם משתמשים במפתח v2. אם יש לכם מפתח מגרסה 2, תצטרכו לשדרג אותו למפתח מגרסה 3 כחלק מההעברה. כך תוכלו:
המפתח מועבר בזמן טעינת Maps JavaScript API v3.
מידע נוסף על יצירת מפתחות API
הערה: אם אתם לקוחות של Google Maps APIs for Work, יכול להיות שאתם משתמשים במזהה לקוח עם הפרמטר client
במקום להשתמש בפרמטר key
. עדיין יש תמיכה במזהי לקוח ב-Maps JavaScript API גרסה 3, ואין צורך לעבור את תהליך השדרוג של המפתח.
טעינת ה-API
השינוי הראשון שצריך לבצע בקוד נוגע לאופן שבו אתם טוענים את ה-API. בגרסה 2, טוענים את Maps JavaScript API דרך בקשה אל http://maps.google.com/maps
. אם אתם מעמיסים את הגרסה השלישית של ממשק API של JavaScript במפות Google, תצטרכו לבצע את השינויים הבאים:
- טעינת ה-API מ-
//maps.googleapis.com/maps/api/js
- מסירים את הפרמטר
file
.
- מעדכנים את הפרמטר
key
במפתח החדש של v3. לקוחות Google Maps APIs for Work צריכים להשתמש בפרמטר client
.
- (תוכנית Premium של הפלטפורמה של מפות Google בלבד) מוודאים שהפרמטר
client
מסופק כפי שמתואר
במדריך למפתחים בתוכנית Premium של הפלטפורמה של מפות Google.
- כדי לבקש את הגרסה האחרונה שפורסמה, מסירים את הפרמטר
v
או משנים את הערך שלו בהתאם לסכימה של ניהול הגרסאות ב-v3.
- (אופציונלי) מחליפים את הפרמטר
hl
ב-language
ושומרים את הערך שלו.
- (אופציונלי) מוסיפים פרמטר
libraries
כדי לטעון ספריות אופציונליות.
במקרה הפשוט ביותר, ה-bootstrap של v3 יציין רק את הפרמטר של מפתח ה-API:
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
בדוגמה הבאה מופיעה בקשה לגרסה האחרונה של Maps JavaScript API v2 בגרמנית:
<script src="//maps.google.com/maps?file=api&v=2.x&key=YOUR_API_KEY&hl=de"></script>
הדוגמה הבאה היא בקשה מקבילה לגרסה 3.
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=de"></script>
חדש: מרחב השמות google.maps
השינוי הבולט ביותר בממשק API של JavaScript במפות Google בגרסה 3 הוא ההשקה של מרחב השמות google.maps
. כברירת מחדל, ה-API בגרסה 2 ממוקם את כל האובייקטים במרחב השמות הגלובלי, מה שעלול לגרום להתנגשויות בשמות. בגרסה 3, כל האובייקטים נמצאים במרחב השמות google.maps
.
כשעוברים את האפליקציה לגרסה 3, צריך לשנות את הקוד כדי להשתמש במרחב השמות החדש. לצערנו, חיפוש של 'G' והחלפה ב-'google.maps' לא יפעלו באופן מלא, אבל זוהי כלל אצבע טוב שאפשר להחיל כשבודקים את הקוד. בהמשך מפורטות כמה דוגמאות לשיעורים המקבילים בגרסה 2 ובגרסה 3.
v2 |
v3 |
GMap2 |
google.maps.Map |
GLatLng |
google.maps.LatLng |
GInfoWindow |
google.maps.InfoWindow |
GMapOptions |
google.map.MapOptions |
G_API_VERSION |
google.maps.version |
GPolyStyleOptions |
google.maps.PolygonOptions or
google.maps.PolylineOptions |
הסרת קוד לא תקף
ב-Maps JavaScript API v3 יש מקבילות לרוב הפונקציות של הגרסה הקודמת, אבל יש כמה כיתות שכבר לא נתמכות. כחלק מההעברה, צריך להחליף את הכיתות האלה בספריות שירות של צד שלישי או להסיר את ההפניות האלה מהקוד. יש הרבה ספריות JavaScript מעולות שמספקות פונקציונליות דומה, כמו Closure או jQuery.
אין מקבילות לכיתות הבאות ב-Maps JavaScript API v3:
GBounds | GLanguage |
GBrowserIsCompatible | GLayer |
GControl | GLog |
GControlAnchor | GMercatorProjection |
GControlImpl | GNavLabelControl |
GControlPosition | GObliqueMercator |
GCopyright | GOverlay |
GCopyrightCollection | GPhotoSpec |
GDownloadUrl | GPolyEditingOptions |
GDraggableObject | GScreenOverlay |
GDraggableObjectOptions | GStreetviewFeatures |
GFactualGeocodeCache | GStreetviewLocation |
GGeoAddressAccuracy | GStreetviewOverlay |
GGeocodeCache | GStreetviewUserPhotosOptions |
GGoogleBar | GTileLayerOptions |
GGoogleBarAdsOptions | GTileLayerOverlayOptions |
GGoogleBarLinkTarget | GTrafficOverlayOptions |
GGoogleBarListingTypes | GUnload |
GGoogleBarOptions | GXml |
GGoogleBarResultList | GXmlHttp |
GInfoWindowTab | GXslt |
GKeyboardHandler |
|
השוואת קוד
נבדוק את ההבדלים בין שתי אפליקציות פשוטות שנכתבו באמצעות ממשקי ה-API של גרסה 2 ושל גרסה 3.
<!DOCTYPE html>
<html>
<head>
<script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById('map'));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419)));
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
כמו שאפשר לראות, יש כמה הבדלים בין שתי האפליקציות. השינויים הבולטים כוללים:
- הכתובת שממנה נטען ה-API השתנתה.
- השיטות
GBrowserIsCompatible()
ו-GUnload()
כבר לא נדרשות בגרסה 3 והן הוסרו מה-API.
- האובייקט
GMap2
מוחלף על ידי google.maps.Map
כאובייקט המרכזי ב-API.
- הנכסים נטענים עכשיו באמצעות כיתות של אפשרויות. בדוגמה שלמעלה, הגדרנו את שלושת המאפיינים הנדרשים כדי לטעון מפה –
center
, zoom
ו-mapTypeId
– באמצעות אובייקט MapOptions
מוטמע.
- ממשק המשתמש שמוגדר כברירת מחדל מופעל כברירת מחדל בגרסה 3. אפשר להשבית את האפשרות הזו על ידי הגדרת המאפיין
disableDefaultUI
לערך true באובייקט MapOptions
.
סיכום
בשלב הזה כבר טעמתם כמה מהנקודות העיקריות שקשורות להעברה מ-v2 ל-v3 של Maps JavaScript API.
יכול להיות שתצטרכו לדעת מידע נוסף, אבל זה תלוי באפליקציה שלכם. בקטעים הבאים מפורטות הוראות העברה למקרים ספציפיים שעשויים להתרחש. בנוסף, יש כמה מקורות מידע שיכולים לעזור לכם במהלך תהליך השדרוג.
אם יש לך בעיות או שאלות לגבי המאמר הזה, אפשר להשתמש בקישור שליחת משוב בחלק העליון של הדף.
בקטע הזה מוצגת השוואה מפורטת בין התכונות הפופולריות ביותר של גרסה 2 ושל גרסה 3 של Maps JavaScript API. כל קטע במסמך העזר מיועד לקריאה בנפרד. מומלץ לא לקרוא את המדריך הזה במלואו, אלא להשתמש בו לפי הצורך בכל מקרה לגופו.
- אירועים – רישום אירועים וטיפול בהם.
- פקדים – שימוש בפקדי הניווט שמופיעים במפה.
- שכבות-על – הוספה ועריכה של אובייקטים במפה.
- סוגי מפות – המשבצות שמרכיבות את מפת הבסיס.
- שכבות – הוספה ועריכה של תוכן כקבוצה, כמו שכבות KML או שכבות תנועה.
- שירותים – עבודה עם שירותי הגיאוקודינג, המסלול או Street View של Google.
אירועים
מודל האירועים של Maps JavaScript API גרסה 3 דומה לזה שנעשה בו שימוש בגרסה 2, אבל הרבה השתנה מתחת לפני השטח.
אירוע חדש לתמיכה ב-MVC
ב-API בגרסה 3 נוספו סוגים חדשים של אירועים כדי לשקף שינויים במצב של MVC. עכשיו יש שני סוגים של אירועים:
- אירועי משתמשים (כמו אירועי לחיצה בעכבר) מועברים מ-DOM אל Maps JavaScript API. האירועים האלה נפרדים ומבדילים מאירועי DOM רגילים.
- התראות על שינויים במצב של MVC משקפות שינויים באובייקטים של Maps API, והן נקראות לפי הסכמה של
property_changed
.
כל אובייקט של Maps API מייצא מספר אירועים עם שם. אפליקציות שמתעניינות באירועים ספציפיים צריכות לרשום להם מאזינים לאירועים ולבצע קוד כשהאירועים האלה מתקבלים. המנגנון המבוסס על אירועים זהה בגרסה 2 ובגרסה 3 של Maps JavaScript API, מלבד השינוי במרחב השמות מ-GEvent
ל-google.maps.event
:
GEvent.addListener(map, 'click', function() {
alert('You clicked the map.');
});
google.maps.event.addListener(map, 'click', function() {
alert('You clicked the map.');
});
הסרת פונקציות מסוג Event Listener
מטעמי ביצועים, מומלץ להסיר את ה-event listener כשאין בו יותר צורך. הסרת event listener פועלת באותו אופן בגרסה 2 ובגרסה 3:
- כשיוצרים מאזין לאירועים, מוחזר אובייקט אטום (GEventListener בגרסה 2, MapsEventListener בגרסה 3).
- כדי להסיר את ה-event listener, מעבירים את האובייקט הזה לשיטה
removeListener()
(GEvent.removeListener()
בגרסה 2 או google.maps.event.removeListener()
בגרסה 3) כדי להסיר את ה-event listener.
הקשבה לאירועי DOM
אם רוצים לתעד אירועי DOM (Document Object Model) ולהגיב להם, בגרסה 3 יש את השיטה הסטטית google.maps.event.addDomListener()
, שזהה לשיטה GEvent.addDomListener()
בגרסה 2.
שימוש באירועים בארגומנטים שהועברו
לעתים קרובות, אירועי ממשק משתמש מעבירים ארגומנטים של אירועים, שאפשר לגשת אליהם לאחר מכן באמצעות ה-event listener. רוב הארגומנטים של האירועים בגרסה 3 שונו כדי שיוכלו להתאים לאובייקטים ב-API בצורה עקבית יותר. (פרטים נוספים זמינים בחומר העזר בנושא v3).
אין ארגומנט overlay
במערכי מעקב אירועים בגרסה 3. אם רושמים אירוע click
במפה בגרסה 3, הקריאה החוזרת תתבצע רק כשהמשתמש לוחץ על מפת הבסיס. אם אתם צריכים להגיב לקליקים האלה, תוכלו לרשום פונקציות קריאה חוזרת נוספות על שכבות-על שניתן ללחוץ עליהן.
// Passes an overlay argument when clicking on a map
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
GEvent.addListener(map,'click', function(overlay, latlng) {
if (latlng) {
var marker = new GMarker(latlng);
map.addOverlay(marker);
}
});
// Passes only an event argument
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
פקדים
ב-Maps JavaScript API מוצגים רכיבי בקרה של ממשק המשתמש שמאפשרים למשתמשים לבצע פעולות במפה. אפשר להשתמש ב-API כדי להתאים אישית את המראה של אמצעי הבקרה האלה.
שינויים בסוגי אמצעי הבקרה
עם API מגרסה 3 נוספו כמה שינויים בסוגי control
.
- ב-API v3 יש תמיכה בסוגי מפות נוספים, כולל מפות שטח והיכולת להוסיף סוגי מפות בהתאמה אישית.
- אמצעי הבקרה ההיררכי של v2,
GHierarchicalMapTypeControl
, לא זמין יותר.
אפשר להשיג אפקט דומה באמצעות אמצעי הבקרה google.maps.MapTypeControlStyle.HORIZONTAL_BAR
.
- הפריסה האופקית ש-
GMapTypeControl
מספק בגרסה 2 לא זמינה בגרסה 3.
הוספת פקדים למפה
באמצעות Maps JavaScript API v2, מוסיפים אמצעי בקרה למפה באמצעות השיטה addControl()
של אובייקט המפה. בגרסה 3, במקום לגשת לאמצעי הבקרה או לשנות אותם ישירות, משנים את אובייקט ה-MapOptions
המשויך. בדוגמה הבאה מוסבר איך להתאים אישית את המפה ולהוסיף את אמצעי הבקרה הבאים:
- לחצנים שמאפשרים למשתמש לעבור בין סוגי המפות הזמינים
- קנה מידה של מפה
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add controls
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add controls
mapTypeControl: true,
scaleControl: true
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
פקדי מיקום במפה
אמצעי הבקרה על המיקום השתנו מאוד בגרסה 3. בגרסה 2, ל-method addControl()
מצורף פרמטר אופציונלי שני שמאפשר לציין את המיקום של אמצעי הבקרה ביחס לפינות המפה.
בגרסה 3, מגדירים את המיקום של אמצעי הבקרה באמצעות המאפיין position
של אפשרויות הבקרה. המיקום של אמצעי הבקרה האלה לא מוחלט. במקום זאת, ממשק ה-API יארגן את אמצעי הבקרה בצורה חכמה על ידי 'העברה' שלהם סביב רכיבי המפה הקיימים, במסגרת אילוצים נתונים (כמו גודל המפה).
כך אפשר להבטיח שאמצעי הבקרה שמוגדרים כברירת מחדל יהיו תואמים לאמצעי הבקרה שלכם.
מידע נוסף זמין במאמר שליטה במיקום ב-v3.
הקוד הבא משנה את המיקום של אמצעי הבקרה מהדוגמאות שלמעלה:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add map type control
map.addControl(new GMapTypeControl(), new GControlPosition(
G_ANCHOR_TOP_LEFT, new GSize(10, 10)));
// Add scale
map.addControl(new GScaleControl(), new GControlPosition(
G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 20)));
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add map type control
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT
},
// Add scale
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
}
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
אמצעי בקרה בהתאמה אישית
באמצעות Maps JavaScript API אפשר ליצור אמצעי בקרה בהתאמה אישית לניווט.
כדי להתאים אישית את אמצעי הבקרה באמצעות ה-API בגרסה 2, צריך ליצור תת-סוג של הכיתה GControl
ולהגדיר מנהלים ל-methods initialize()
ו-getDefaultPosition()
.
אין מקבילה לכיתה GControl
בגרסה 3. במקום זאת, הפקדים מיוצגים כרכיבי DOM. כדי להוסיף אמצעי בקרה בהתאמה אישית באמצעות API v3, יוצרים מבנה DOM לאמצעי הבקרה ב-constructor כצאצא של Node
(למשל, רכיב <div>
) ומוסיפים מאזינים לאירועים כדי לטפל בכל אירועי ה-DOM. כדי להוסיף למפה מופע של אמצעי הבקרה בהתאמה אישית, צריך לדחוף את Node
למערך controls[position]
של המפות.
בהתאם להטמעה של הכיתה HomeControl
שתואמת לדרישות הממשק שצוינו למעלה (פרטים נוספים זמינים במסמכי התיעוד של אמצעי בקרה מותאמים אישית), בדוגמאות הקוד הבאות מוסבר איך להוסיף אמצעי בקרה מותאם אישית למפה.
map.addControl(new HomeControl(),
GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
homeControlDiv);
שכבות-על
שכבות-על משקפות אובייקטים שאתם 'מוסיפים' למפה כדי לסמן נקודות, קווים, אזורים או אוספים של אובייקטים.
הוספה והסרה של שכבות-על
סוגי האובייקטים שמוצגים על ידי שכבת-על זהים בגרסה 2 ובגרסה 3, אבל הטיפול בהם שונה.
שכבות-על ב-API מגרסה 2 נוספו למפה והוסרו ממנה באמצעות השיטות addOverlay()
ו-removeOverlay()
של האובייקט GMap2
. בגרסה 3, מקצים מפה לשכבת-על באמצעות המאפיין map
של הכיתה המשויכת של אפשרויות השכבה.
אפשר גם להוסיף או להסיר שכבת-על ישירות על ידי קריאה ל-method setMap()
של אובייקט שכבת-העל, וציון המפה הרצויה. הגדרת מאפיין המפה כ-null
מסירה את שכבת-העל.
אין שיטה clearOverlays()
בגרסה 3.
אם רוצים לנהל קבוצה של שכבות-על, צריך ליצור מערך שיאחסן את השכבות. לאחר מכן, אפשר להשתמש במערך הזה כדי לקרוא ל-setMap()
בכל שכבת-על במערך (תוך העברת null
אם צריך להסיר אותן).
סמנים שניתן לגרור
כברירת מחדל, אפשר ללחוץ על סמנים אבל אי אפשר לגרור אותם. בשתי הדוגמאות הבאות מוסף סמן שניתן לגרירה:
var myLatLng = new GLatLng(-25.363882, 131.044922);
var map = new GMap2(document.getElementById('map'));
map.setCenter(myLatLng, 4);
var marker = new GMarker(latLng, {
draggable: true
});
map.addOverlay(marker);
var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var map = new google.maps.Map(
document.getElementById('map'), {
center: myLatLng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
draggable: true,
map: map
});
סמלים
אפשר להגדיר סמל מותאם אישית שיוצג במקום הסמן שמוגדר כברירת מחדל.
כדי להשתמש בתמונה בהתאמה אישית בגרסה 2, אפשר ליצור מכונה של GIcon
מה-G_DEFAULT_ICON type
ולשנות אותה. אם התמונה גדולה או קטנה מהסמל שמוגדר כברירת מחדל, צריך לציין אותה באמצעות מופע GSize
.
ב-API v3 התהליך הזה פשוט יותר.
פשוט מגדירים את המאפיין icon
של הסמן לכתובת ה-URL של התמונה בהתאמה אישית, וה-API יקבע את גודל הסמל באופן אוטומטי.
ב-Maps JavaScript API יש גם תמיכה בסמלים מורכבים.
סמל מורכב יכול לכלול כמה משבצות, צורות מורכבות או לציין את 'סדר העריכה' של התמונות שמוצגות ביחס לשכבות-על אחרות. כדי להוסיף צורה לסמן בגרסה 2, צריך לציין את המאפיין הנוסף בכל מופע של GIcon
ולהעביר אותו כאפשרות למבנה GMarker
. בגרסה 3, צריך להגדיר את המאפיינים icon
של סמלים שצוינו באופן הזה לאובייקט מסוג Icon
.
אין תמיכה בצללים של סמנים בגרסה 3.
בדוגמאות הבאות מוצג דגל חוף בחוף בונדי באוסטרליה, והחלק השקוף של הסמל לא ניתן ללחיצה:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
var flagIcon = new GIcon(G_DEFAULT_ICON);
flagIcon.image = '/images/beachflag.png';
flagIcon.imageMap = [1, 1, 1, 20, 18, 20, 18 , 1];
var bbLatLng = new GLatLng(-33.890542, 151.274856);
map.addOverlay(new GMarker(bbLatLng, {
icon: flagIcon
}));
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bbLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var bbMarker = new google.maps.Marker({
icon: '/images/beachflag.png'
shape: shape,
position: bbLatLng,
map: map
});
קווים פוליגונים
קו מרובע מורכב ממערך של LatLng
, וגם מסדרה של מקטע קו שמחבר את המיקומים האלה בסדר מסודר.
יצירת אובייקט Polyline
ותצוגתו בגרסה 3 דומים לשימוש באובייקט GPolyline
בגרסה 2. בדוגמאות הבאות מצויר קו פוליגונלי גיאודטי שקוף ברוחב 3 פיקסלים מציריך לסידני דרך סינגפור:
var polyline = new GPolyline(
[
new GLatLng(47.3690239, 8.5380326),
new GLatLng(1.352083, 103.819836),
new GLatLng(-33.867139, 151.207114)
],
'#FF0000', 3, 0.5, {
geodesic: true
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(47.3690239, 8.5380326),
new google.maps.LatLng(1.352083, 103.819836),
new google.maps.LatLng(-33.867139, 151.207114)
],
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
geodesic: true
});
polyline.setMap(map);
קווים פוליגונים מקודדים
בגרסה 3 אין תמיכה ביצירת אובייקטים מסוג Polyline
ישירות מקווים פוליגונליים מקודדים. במקום זאת, ספריית הגיאומטריה מספקת שיטות לקידוד ולפענוח של קווים פולינימיים. מידע נוסף על טעינת הספרייה הזו זמין בקטע ספריות ב-Maps API v3.
הדוגמאות הבאות מציגות את אותה קווים פוליגונים מקודדים. בקוד בגרסה 3 נעשה שימוש בשיטה decodePath()
ממרחב השמות google.maps.geometry.encoding
.
var polyline = new GPolyline.fromEncoded({
points: 'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H',
levels: 'PPP',
zoomFactor: 2,
numLevels: 18,
color: '#ff0000',
opacity: 0.8,
weight: 3
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: google.maps.geometry.encoding.decodePath(
'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H'),
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
});
polyline.setMap(map);
פוליגונים
פוליגון מגדיר אזור בתוך לולאה סגורה. בדומה לאובייקט Polyline
, אובייקטים מסוג Polygon
מורכבים מסדרה של נקודות ברצף מסודר. הכיתה Polygon
בגרסה v3 דומה מאוד לכיתה GPolygon
בגרסה v2, עם ההבדל הבולט שלא צריך יותר לחזור על הנקודה ההתחלתית בסוף הנתיב כדי לסגור את הלולאה. ה-API בגרסה 3 יסגור באופן אוטומטי פוליגונים על ידי ציור קו שמחבר את הקואורדינטה האחרונה חזרה לקוואורדינטה הראשונה. קטעי הקוד הבאים יוצרים פוליגון שמייצג את משולש ברמודה:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(24.886436, -70.268554), 5);
var bermudaTriangle = new GPolygon(
[
new GLatLng(25.774252, -80.190262),
new GLatLng(18.466465, -66.118292),
new GLatLng(32.321384, -64.75737),
new GLatLng(25.774252, -80.190262)
],
'#FF0000', 2, 0.8, '#FF0000', 0.35);
map.addOverlay(bermudaTriangle);
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(24.886436, -70.268554),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 5
});
var bermudaTriangle = new google.maps.Polygon({
paths: [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
],
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
צורות שניתנות לעריכה על ידי משתמשים
אפשר להגדיר שמשתמשים יוכלו לערוך קווים פוליגונליים ופוליגונים. קטעי הקוד הבאים זהים:
map.addOverlay(polyline);
polyline.enableEditing();
polyline.setMap(map);
polyline.setEditable(true);
ליכולות מתקדמות יותר של ציור, אפשר לעיין בספריית הציור במסמכי התיעוד של גרסה 3.
חלונות מידע
הסמל InfoWindow
מציג תוכן בחלון צף מעל המפה. יש כמה הבדלים עיקריים בין חלונות המידע של גרסה 2 לבין חלונות המידע של גרסה 3:
- ב-API בגרסה 2 יש תמיכה רק ב-
GInfoWindow
אחד לכל מפה, ואילו ב-API בגרסה 3 יש תמיכה בכמה InfoWindow
s בו-זמנית בכל מפה.
InfoWindow
בגרסה 3 תישאר פתוחה כשתלחצו על המפה. GInfoWindow
בגרסה 2 נסגר באופן אוטומטי כשלוחצים על המפה. כדי לחקות את ההתנהגות של v2, מוסיפים מאזין click
לאובייקט Map
.
- ב-API v3 אין תמיכה מובנית ב-
InfoWindow
עם כרטיסיות.
שכבות-על של קרקע
כדי להציב תמונה במפה, צריך להשתמש באובייקט GroundOverlay
. ה-constructor של GroundOverlay
זהה במהותו בגרסה 2 ובגרסה 3: הוא מציין כפרמטרים את כתובת ה-URL של התמונה ואת גבולות התמונה.
בדוגמה הבאה מופיעה מפה עתיקה של ניוארק, ניו ג'רזי, כשכבת-על במפה:
var bounds = new GLatLngBounds(
new GLatLng(40.716216, -74.213393),
new GLatLng(40.765641, -74.139235));
var overlay = new GGroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
map.addOverlay(overlay);
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216, -74.213393),
new google.maps.LatLng(40.765641, -74.139235));
var overlay = new google.maps.GroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
overlay.setMap(map);
סוגי מפות
יש הבדלים קלים בין סוגי המפות שזמינים בגרסה 2 ובגרסה 3, אבל כל סוגי המפות הבסיסיים זמינים בשתי הגרסאות של ה-API. כברירת מחדל, בגרסה 2 נעשה שימוש בתמונות רגילות של מפות כבישים 'מצוירות'. עם זאת, בגרסה 3 צריך לציין סוג מפה ספציפי כשיוצרים אובייקט google.maps.Map
.
סוגי מפות נפוצים
ארבעת סוגי המפות הבסיסיים זמינים גם בגרסה 2 וגם בגרסה 3:
MapTypeId.ROADMAP
(מחליף את G_NORMAL_MAP
)
מציג את תצוגת מפת הכבישים.
MapTypeId.SATELLITE
(מחליף את G_SATELLITE_MAP
)
הצגת תמונות לוויין של Google Earth.
MapTypeId.HYBRID
(מחליף את G_HYBRID_MAP
)
מציג שילוב של תצוגה רגילה ותצוגת לוויין.
MapTypeId.TERRAIN
(מחליף את G_PHYSICAL_MAP
)
מציג מפה פיזית על סמך נתוני פני השטח.
בהמשך מופיעה דוגמה לגרסה 2 ולגרסה 3 של הגדרת המפה לתצוגת פני השטח:
map.setMapType(G_PHYSICAL_MAP);
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
ב-Maps JavaScript API v3 בוצעו גם כמה שינויים בסוגים פחות נפוצים של מפות:
- משבצות מפה של גופים שמימיים שאינם כדור הארץ לא זמינות כסוגי מפה ב-API v3, אבל אפשר לגשת אליהן כסוגי מפה מותאמים אישית, כפי שמתואר בדוגמה הזו.
- אין סוג מפה מיוחד בגרסה 3 שמחליף את הסוג
G_SATELLITE_3D_MAP
בגרסה 2. במקום זאת, תוכלו לשלב את הפלאגין של Google Earth במפות בגרסה 3 באמצעות הספרייה הזו.
תמונות בזום מקסימלי
צילומי לוויין לא תמיד זמינים ברמות זום גבוהות. אם אתם רוצים לדעת מהי רמת הזום הגבוהה ביותר שזמינה לפני שמגדירים את רמת הזום, תוכלו להשתמש בכיתה google.maps.MaxZoomService
. הכיתה הזו מחליפה את השיטה GMapType.getMaxZoomAtLatLng()
מגרסה 2.
var point = new GLatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(point);
map.setMapType(G_HYBRID_MAP);
map.getCurrentMapType().getMaxZoomAtLatLng(point,
function(response) {
if (response.status) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
var myLatlng = new google.maps.LatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new google.maps.Map(
document.getElementById("map"),{
zoom: 0,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var maxZoomService = new google.maps.MaxZoomService();
maxZoomService.getMaxZoomAtLatLng(
myLatlng,
function(response) {
if (response.status == google.maps.MaxZoomStatus.OK) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
צילומי אוויר בפרספקטיבה
כשמפעילים תמונות אוויריות בגרסה 3, אמצעי הבקרה דומים לאמצעי הבקרה GLargeZoomControl3D
בגרסה 2, עם אמצעי בקרה נוסף של סיבוב (interstitial) כדי לסובב את התמונה בכיוונים הנתמכים.
במפה הזו אפשר לעקוב אחרי הערים שבהן תמונות מזווית של 45° זמינות כרגע. כשצילומי לוויין מזווית של 45 מעלות זמינים, מופיעה אפשרות בתפריט המשנה של הלחצן 'לוויין' ב-Maps API.
שכבות
שכבות הן אובייקטים במפה שמכילים שכבת-על אחת או יותר. אפשר לבצע בהם פעולות כיחידה אחת, ובדרך כלל הם משקפים אוספים של אובייקטים.
שכבות נתמכות
ממשק ה-API בגרסה 3 מספק גישה לכמה שכבות שונות. השכבות האלה חופפות לכיתה GLayer
ב-v2 באזורים הבאים:
-
אובייקט
KmlLayer
מעבד אלמנטים של KML ו-GeoRSS לשכבות-על בגרסה 3, ומספק את המקבילה לשכבה GeoXml
בגרסה 2.
- אובייקט
TrafficLayer
יוצר שכבה שמציגה את תנאי התנועה, בדומה לשכבת-העל GTrafficOverlay
בגרסה 2.
השכבות האלה שונות מ-v2. ההבדלים מפורטים בהמשך. אפשר להוסיף אותן למפה באמצעות קריאה ל-setMap()
, תוך העברת האובייקט Map
שבו רוצים להציג את השכבה.
מידע נוסף על השכבות הנתמכות זמין במסמכי התיעוד בנושא שכבות.
שכבות KML ו-GeoRSS
Maps JavaScript API תומך בפורמטים של נתוני KML ו-GeoRSS להצגת מידע גיאוגרפי. אם רוצים לכלול קובצי KML או GeoRSS במפה, הם צריכים להיות גלויים לכולם. בגרסה 3, פורמטים הנתונים האלה מוצגים באמצעות מופע של KmlLayer
, שמחליף את האובייקט GGeoXml
מגרסה 2.
ה-API בגרסה 3 גמיש יותר בזמן עיבוד ה-KML, ומאפשר לכם לדכא חלונות מידע ולשנות את התגובה לקליק. פרטים נוספים זמינים במסמכי התיעוד של שכבות KML ו-GeoRSS בגרסה 3.
כשמריצים עיבוד של KmlLayer
, חלות הגבלות על הגודל והמורכבות. פרטים נוספים זמינים במסמכי התיעוד של KmlLayer.
בדוגמאות הבאות מוצגות דרכים שונות לטעינה של קובץ KML.
geoXml = new GGeoXml(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml');
map.addOverlay(geoXml);
var layer = new google.maps.KmlLayer(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml', {
preserveViewport: true
});
layer.setMap(map);
שכבת התנועה
בגרסה 3 אפשר להוסיף למפות מידע על תנועה בזמן אמת (במקרים שבהם התכונה נתמכת) באמצעות האובייקט TrafficLayer
. מידע על התנועה מתייחס לזמן שבו הבקשה נשלחת. בדוגמאות הבאות מוצג מידע על תנועה בלוס אנג'לס:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(34.0492459, -118.241043), 13);
map.setUIToDefault();
var trafficOptions = {incidents:false};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(34.0492459, -118.241043),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
בניגוד לגרסה 2, אין אפשרויות למבנה TrafficLayer
בגרסה 3. אירועים לא זמינים בגרסה 3.
שירותים
המרת כתובות לקואורדינטות (geocoding)
Maps JavaScript API מספק אובייקט geocoder
להמרת כתובות לקואורדינטות (geocoding) באופן דינמי מהקלט של המשתמש. אם אתם רוצים לבצע קידוד גאוגרפי של כתובות ידועות וסתמיות, תוכלו לעיין במסמכי העזרה של Geocoding API.
Geocoding API שודרג ושיפר באופן משמעותי, עם הוספת תכונות חדשות ושינוי אופן הייצוג של הנתונים.
GClientGeocoder
ב-API בגרסה 2 סיפק שתי שיטות שונות לביצוע גיאוקוד מקדימה וגם גיאוקוד לאחור, וכן שיטות נוספות להשפיע על אופן ביצוע הגיאוקוד. לעומת זאת, באובייקט Geocoder
בגרסה 3 יש רק שיטה geocode()
, שמקבלת אובייקט לינרי שמכיל את מונחי הקלט (בצורת אובייקט Geocoding Requests) ושיטת קריאה חוזרת (callback). בהתאם לכך שהבקשה מכילה מאפיין address
טקסטואלי או אובייקט LatLng
, Geocoding API יחזיר תגובה של קידוד קדימה או המרת קואורדינטות לכתובות (reverse geocoding). אפשר להשפיע על אופן ביצוע הגיאוקודינג על-ידי העברת שדות נוספים לבקשת הגיאוקודינג:
- הוספת
address
טקסטואלי מפעילה טרנסקודציה קדימה, שמקבילה לקריאה לשיטה getLatLng()
.
- הוספת אובייקט
latLng
מפעילה המרת קואורדינטות לכתובות (reverse geocoding), שמקבילה לקריאה ל-method getLocations()
.
- הוספת המאפיין
bounds
מפעילה הטיה של Viewport, שזהה לקריאה לשיטה setViewport()
.
- הוספת המאפיין
region
מאפשרת הטיה לפי קוד אזור, שזהה לקריאה ל-method setBaseCountryCode()
.
תשובות של גיאוקודינג בגרסה 3 שונות מאוד מהתשובות בגרסה 2. ב-API בגרסה 3, המבנה המורכב שמאפיין את הגרסה 2 הוחלף במבנה פשוט יותר שקל יותר לנתח. בנוסף, התשובות בגרסה 3 מפורטות יותר: לכל תוצאה יש כמה רכיבי כתובת שעוזרים לתת תמונה טובה יותר של רזולוציית כל תוצאה.
הקוד הבא מקבל כתובת בטקסט ומציג את התוצאה הראשונה מהמרה לקואורדינטות גיאוגרפיות:
var geocoder = new GClientGeocoder();
var infoPanel;
var map;
var AccuracyDescription = [
'Unknown accuracy', 'country level accuracy',
'region level accuracy', 'sub-region level accuracy',
'town level accuracy', 'post code level accuracy',
'street level accuracy', 'intersection level accuracy',
'address level accuracy', 'premise level accuracy',
];
function geocode_result_handler(response) {
if (!response || response.Status.code != 200) {
alert('Geocoding failed. ' + response.Status.code);
} else {
var bounds = new GLatLngBounds(new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.south,
response.Placemark[0].ExtendedData.LatLonBox.west
), new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.north,
response.Placemark[0].ExtendedData.LatLonBox.east
));
map.setCenter(bounds.getCenter(),
map.getBoundsZoomLevel(bounds));
var latlng = new GLatLng(
response.Placemark[0].Point.coordinates[1],
response.Placemark[0].Point.coordinates[0]);
infoPanel.innerHTML += '<p>1st result is <em>' +
// No info about location type
response.Placemark[0].address +
'</em> of <em>' +
AccuracyDescription[response.Placemark[0].
AddressDetails.Accuracy] +
'</em> at <tt>' + latlng + '</tt></p>';
var marker_title = response.Placemark[0].address +
' at ' + latlng;
map.clearOverlays();
var marker = marker = new GMarker(
latlng,
{'title': marker_title}
);
map.addOverlay(marker);
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.getLocations(address, geocode_result_handler);
}
function initialize() {
map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(38, 15), 2);
map.setUIToDefault();
infoPanel = document.getElementById('info-panel');
}
var geocoder = new google.maps.Geocoder();
var infoPanel;
var map;
var marker;
function geocode_result_handler(result, status) {
if (status != google.maps.GeocoderStatus.OK) {
alert('Geocoding failed. ' + status);
} else {
map.fitBounds(result[0].geometry.viewport);
infoPanel.innerHTML += '<p>1st result for geocoding is <em>' +
result[0].geometry.location_type.toLowerCase() +
'</em> to <em>' +
result[0].formatted_address + '</em> of types <em>' +
result[0].types.join('</em>, <em>').replace(/_/, ' ') +
'</em> at <tt>' + result[0].geometry.location +
'</tt></p>';
var marker_title = result[0].formatted_address +
' at ' + latlng;
if (marker) {
marker.setPosition(result[0].geometry.location);
marker.setTitle(marker_title);
} else {
marker = new google.maps.Marker({
position: result[0].geometry.location,
title: marker_title,
map: map
});
}
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.geocode({'address': address}, geocode_result_handler);
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(38, 15),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
});
infoPanel = document.getElementById('info-panel');
}
מסלול
כדי לחשב מסלולים, ב-Maps JavaScript API גרסה 3 החליפו את הכיתה GDirections
מגרסה 2 בכיתה DirectionsService
.
ה-method route()
בגרסה 3 מחליף את ה-method load()
ואת ה-method loadFromWaypoints()
מ-API בגרסה 2. השיטה מקבלת ליצ'ר של אובייקט DirectionsRequest
אחד שמכיל את מונחי הקלט ושיטת קריאה חוזרת (callback) שתתבצע עם קבלת התגובה. אפשר לציין אפשרויות בביטוי האובייקט הזה, בדומה לביטוי האובייקט GDirectionsOptions
בגרסה 2.
ב-Maps JavaScript API v3, המשימה של שליחת בקשות לקבלת מסלול הופרדה מהמשימה של עיבוד הבקשות, שמטופלת עכשיו באמצעות הכיתה DirectionsRenderer
. אפשר לקשר אובייקט DirectionsRenderer
לכל מפה או אובייקט DirectionsResult
באמצעות השיטות setMap()
ו-setDirections()
. מאחר שהמעבד הוא MVCObject
, הוא יזהה שינויים בנכסים שלו ויעדכן את המפה כשהמסלולים המשויכים ישתנו.
הקוד הבא מראה איך לבקש מסלול הליכה למיקום ספציפי באמצעות שבילי הליכה מכתובת. לתשומת ליבכם: רק גרסה 3 יכולה לספק מסלולי הליכה בנתיב להולכי רגל בגן החיות של דבלין.
var map;
var directions;
var directionsPanel;
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsPanel = document.getElementById("route");
map = new GMap2(document.getElementById('map'));
map.setCenter(origin, 10);
map.setUIToDefault();
directions = new GDirections(map, directionsPanel);
directions.loadFromWaypoints(
[origin, destination], {
travelMode: 'G_TRAVEL_MODE_WALKING',
});
}
var map;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsRenderer = new google.maps.DirectionsRenderer();
map = new google.maps.Map(
document.getElementById('map'), {
center: origin,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsRenderer.setPanel(document.getElementById("route"));
directionsRenderer.setMap(map);
directionsService.route({
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.WALKING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});
}
Street View
התכונה Google Street View מספקת תצוגות אינטראקטיביות של 360° ממיקומים ייעודיים בתוך אזור הכיסוי שלה. ה-API בגרסה 3 תומך ב-Street View באופן מקורי בדפדפן, בניגוד לגרסה 2 שבה היה צורך בפלאגין Flash® כדי להציג תמונות Street View.
אפשר להשתמש בתמונות Street View באמצעות האובייקט StreetViewPanorama
בגרסה 3, או באמצעות האובייקט GStreetviewPanorama
בגרסה 2. לכיתות האלה יש ממשקים שונים, אבל הן ממלאות את אותו תפקיד: חיבור הקונטיינר div
לתמונות Street View ומתן אפשרות לציין את המיקום ואת נקודת המבט של התמונה הפנורמית ב-Street View.
function initialize() {
var fenwayPark = new GLatLng(42.345573, -71.098326);
panoramaOptions = {
latlng: fenwayPark,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new GStreetviewPanorama(
document.getElementById('pano'),
panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoramaOptions = {
position: fenway,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'),
panoramaOptions);
}
אפשר לגשת ישירות לנתוני Street View דרך האובייקט StreetViewService
בגרסה 3 או דרך האובייקט GStreetviewClient
בגרסה 2. בשני המקורות יש ממשקים דומים לאחזור או לבדיקה של זמינות נתוני Street View, ואפשר לחפש לפי מיקום או מזהה פנורמה.
בגרסה 3, התכונה Street View מופעלת כברירת מחדל. המפה תופיע עם אטב-איש של Street View, ו-API ישתמש שוב ב-div של המפה כדי להציג תמונות פנורמיות של Street View. הקוד הבא מראה איך לחקות את ההתנהגות של גרסה 2 על ידי הפרדת התמונות הפנורמיות של Street View ל-div נפרד.
var marker;
var panoClient = new GStreetviewClient();
function initialize() {
if (GBrowserIsCompatible()) {
var myPano = new GStreetviewPanorama(
document.getElementById('pano'));
GEvent.addListener(myPano, 'error', handleNoFlash);
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(42.345573, -71.098326), 16);
map.setUIToDefault();
GEvent.addListener(map, 'click', function(overlay, latlng) {
if (marker) {
marker.setLatLng(latlng);
} else {
marker = new GMarker(latlng);
map.addOverlay(marker);
}
var nearestPano = panoClient.getNearestPanorama(
latlng, processSVData);
});
function processSVData(panoData) {
if (panoData.code != 200) {
alert("Panorama data not found for this location.");
}
var latlng = marker.getLatLng();
var dLat = latlng.latRadians()
- panoData.location.latlng.latRadians();
var dLon = latlng.lngRadians()
- panoData.location.latlng.lngRadians();
var y = Math.sin(dLon) * Math.cos(latlng.latRadians());
var x = Math.cos(panoData.location.latlng.latRadians()) *
Math.sin(latlng.latRadians()) -
Math.sin(panoData.location.latlng.latRadians()) *
Math.cos(latlng.latRadians()) * Math.cos(dLon);
var bearing = Math.atan2(y, x) * 180 / Math.PI;
myPano.setLocationAndPOV(panoData.location.latlng, {
yaw: bearing
});
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
}
}
// Load the API with libraries=geometry
var map;
var marker;
var panorama;
var sv = new google.maps.StreetViewService();
function radians(degrees) { return Math.PI * degrees / 180.0 };
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"));
map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(42.345573, -71.098326),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 16
});
google.maps.event.addListener(map, 'click', function(event) {
if (!marker) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
} else {
marker.setPosition(event.latLng);
}
sv.getPanoramaByLocation(event.latLng, 50, processSVData);
});
}
function processSVData(panoData, status) {
if (status == google.maps.StreetViewStatus.OK) {
alert("Panorama data not found for this location.");
}
var bearing = google.maps.geometry.spherical.computeHeading(
panoData.location.latLng, marker.getPosition());
panorama.setPano(panoData.location.pano);
panorama.setPov({
heading: bearing,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);
marker.setMap(panorama);
}