נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך API של מפות גוגל

מחבר:
בתאריך:

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

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

לפני שמתחילים, צריך להצטייד במפתח אישי (API key), שהוא מפתח ייחודי, שמשמש את גוגל כשהוא מזהה את האפליקציה שלכם. שלבי הוצאת המפתח כוללים:

  1. כניסה עם חשבון הגוגל שלכם (מספיק שיש לכם חשבון Gmail כדי שיהיה לכם חשבון כזה) בכתובת:
    https://accounts.google.com
  2. אחרי הכניסה, הולכים לקונסולת המפתחים (Google developers console).
  3. כדי ליצור פרויקט חדש לוחצים על Create new project , ואז על Continue.
  4. הולכים לשורה שבה כתוב- Google Maps API v3 ולוחצים עליה כדי שתעבור ממצב OFF ל-ON.
  5. מתחת ל-Public API access מקליקים על Create new key כדי ליצור את המפתח האישי.
  6. בוחרים מהמפתחות את המפתח Browser key (האפליקציה מבוססת על js ורצה על הדפדפן), ושומרים את המפתח להמשך הדרך.

 

מפה בסיסית

את המפה ממקמים בתוך דיב ששמו mapDiv, שחייבים לתת לו ממדים של גובה ואורך.

<div id="mapDiv" style="width:500px;height:500px;"></div>

מוסיפים לתווית הסקריפט את המפתח שקבלנו מגוגל :

<script src="http://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 = "http://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
});
 
// מאזין ללחיצה על המרקר גורם להצגת חלונית המידע ולמיקוד המפה
google.maps.event.addListener(marker, 'click', function() {
  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);
});

לכל מדריכי ה-javascript

הוסף תגובה חדשה

 

= 5 + 9

תמונת המגיב

אברהם בתאריך: 06.10.2015

יפה מאוד!! יישר כח על ההשקעה העצומה!!

תמונת המגיב

עמית בתאריך: 22.06.2016

הכיתוב בעברית שהוספתי מוצג בספרות מוזרות מה הסיבה?

תמונת המגיב

יוסי בן הרוש בתאריך: 22.06.2016

בעיית קידוד. תוודא שההטמל וגם עורך הטקסט עובדים בקידוד utf-8