גוגל מפות – ריבוי מרקרים

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

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

הדבר הראשון שאנחנו צריכים זה את הapi של גוגל:

<script src="https://maps.googleapis.com/maps/api/js"></script>

לאחר מכן הקוד המרכזי. אתן את כל הקוד ואז אסביר את הדברים המרכזיים:

    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var centerLat = '';
        var centerLng = '';
        /*ajax*/

        $.ajax({
            url: 'get-locations.php',
            success:function(data){

                //console.log(data[0].lng);
                //Loop through each location.
                // Sample use of first data
                centerLat = data[0].lat;
                centerLng = data[0].lng;
                $.each(data, function(){
                    //Plot the location as a marker
                    var theposition = new google.maps.LatLng(this.lat, this.lng); 
                    var marker = new google.maps.Marker({
                        position: theposition,
                        map: map,
                        title: 'Uluru (Ayers Rock)',
                        animation: google.maps.Animation.DROP
                    });


                var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">'+this.name+'</h1>'+
                '<div id="bodyContent">'+
                '<p>'+this.address+'</p>'+
                '</div>'+
                '</div>';

                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });



                    marker.addListener('click', function() {
                        infowindow.open(map, marker);
                      });
                });
                //map.setCenter(centerLat,centerLng);
                map.setCenter(new google.maps.LatLng(centerLat,centerLng));
            }
        });

        /*ajax*/

    }
    google.maps.event.addDomListener(window, 'load', initialize);

</script>

אז מה קורה כאן?

ראשית, אנחנו מציינים את אלמנט הhtml שאליו נטען את המפה.

לאחר מכן מייצרים את האופציות של המפה. במקרה זה השתמשתי רק בשתי אופציות. הAPI של גוגל מלא אפשרויות אחרות. google API maps

לפני קריאת האג’קס אנחנו מייצרים שני משתנים שיאחסנו את קווי המרחק הנדרשים.

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

שימו לב שקריאת האג’קס קוראת לקובץ get-locations.php. אז בואו נבדוק אותו:

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

$sql = "SELECT * FROM `markers`";
$sel = $db->dbSelectBySql($sql);
//var_dump($sel);


//Encode the $locations array in JSON format and print it out.
header('Content-Type: application/json');
echo json_encode($sel);

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

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

הhtml  עצמו הוא הכי פשוט שיש:

<div id="map" style="width: 100%; height: 400px;"></div>

וזהו. בעקרון זה כל מה שצריך