תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

מדריך 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="//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
});
 
// מאזין ללחיצה על המרקר גורם להצגת חלונית המידע ולמיקוד המפה
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 למתקדמים

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

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

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

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

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

דג למים הוא כמו ציפור ל...?

 

תמונת המגיב

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

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

תמונת המגיב

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

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

תמונת המגיב

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

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

תמונת המגיב

חנה בתאריך: 14.03.2018

תודה רבה,
לא עובד לי חלונית המידע, מה הסיבה?

תמונת המגיב

נועם בתאריך: 01.05.2018

תודה רבה, מאד יפה.
האם נתקלת בבעיה בבחירת יישובים מעבר לקו הירוק ?

תמונת המגיב

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

הי נועם, לא מכיר את הבעיה.

תמונת המגיב

איש נחמד בתאריך: 03.02.2019

אחרי הכניסה, הולכים לקונסולת המפתחים.
איך אני מגיע לשם ?

תמונת המגיב

נבהמנ בתאריך: 30.05.2019

מושלם, מוסבר בצורה הכי ברורה שיש,
עזר לי מאוד!!

תמונת המגיב

אנה לוין בתאריך: 22.03.2021

היי, תודה על המדריך המשוקע!
איך אני יכולה לחשב מסלול נסיעה בתחבורה ציבורית כשיש לי נקודת מוצא ויעד.
תודה!

תמונת המגיב

רחל בתאריך: 22.03.2021

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

תמונת המגיב

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

האם זה רלוונטי לעכשו? אני לא מצליח ליצור מפתח יכול להיות שכבר צריך לשלם על זה כסף?