mercredi 5 août 2015

Google Maps: Multiple dynamic Markers and One Static Marker on the same map?


to keep the story short, I am currently displaying Multiple dynamic markers on google maps and one Static Marker.

The Dynamic markers are being moved around on the map using AJAX/PHP.

The Static marker gets it Position from the PHP $_GET.

So far everything works fine.

But the issue that I am facing is that when Dynamic Markers move on the map (AJAX execution), this will cause the Static Marker (the single Marker) to disappear!

This is my entire code:

<script type="text/javascript">



  $(function() {


    var locations = {};//A repository for markers (and the data from which they were constructed).

    //initial dataset for markers
    var locs = {
        /*1: { info:'Rooz', lat:-37.8139, lng:144.9634, icon:'carIconr.png'},
        2: { info:'Michele', lat:46.0553, lng:14.5144, icon:'carIconr.png' }*/
        0: { info:'You', lat:<?php echo $ulat; ?>, lng:<?php echo $ulng; ?>, icon:'meicon.png'},

        <?php echo $vehilcles; ?>

    };
    var map = new google.maps.Map(document.getElementById('map_2385853'), {
        zoom: 16,
        streetViewControl: true,



        center: new google.maps.LatLng(<?php echo $ulat; ?>, <?php echo $ulng; ?>),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });


    var infowindow = new google.maps.InfoWindow();

var auto_remove = true;//When true, markers for all unreported locs will be removed.

function setMarkers(locObj) {
    if(auto_remove) {
        //Remove markers for all unreported locs, and the corrsponding locations entry.
        $.each(locations, function(key) {
            if(!locObj[key]) {
                if(locations[key].marker) {
                    locations[key].marker.setMap(null);
                }
                delete locations[key];
            }
        });
    }

        $.each(locObj, function(key, loc) {
            if(!locations[key] && loc.lat!==undefined && loc.lng!==undefined && loc.icon!==undefined) {
                //Marker has not yet been made (and there's enough data to create one).

                //Create marker
                loc.marker = new google.maps.Marker({
                    position: new google.maps.LatLng(loc.lat, loc.lng , loc.icon),
                    map: map,
                    icon: loc.icon,
                });

                //Attach click listener to marker
                google.maps.event.addListener(loc.marker, 'click', (function(key) {
                    return function() {
                        infowindow.setContent(locations[key].info);
                        infowindow.open(map, locations[key].marker);
                    }
                })(key));

                //Remember loc in the `locations` so its info can be displayed and so its marker can be deleted.
                locations[key] = loc;
            }
            else if(locations[key] && loc.remove) {
                //Remove marker from map
                if(locations[key].marker) {
                    locations[key].marker.setMap(null);
                }
                //Remove element from `locations`
                delete locations[key];
            }
            else if(locations[key]) {
                //Update the previous data object with the latest data.
                $.extend(locations[key], loc);
                if(loc.lat!==undefined && loc.lng!==undefined) {
                    //Update marker position (maybe not necessary but doesn't hurt).
                    locations[key].marker.setPosition(
                        new google.maps.LatLng(loc.lat, loc.lng)
                    );
                }
                //locations[key].info looks after itself.
            }
        });
    }

    var ajaxObj = {//Object to save cluttering the namespace.
        options: {
            url: "ve.php",//The resource that delivers loc data.
            dataType: "json"//The type of data tp be returned by the server.
        },
        delay: 10000,//(milliseconds) the interval between successive gets.
        errorCount: 0,//running total of ajax errors.
        errorThreshold: 5,//the number of ajax errors beyond which the get cycle should cease.
        ticker: null,//setTimeout reference - allows the get cycle to be cancelled with clearTimeout(ajaxObj.ticker);
        get: function() { //a function which initiates 
            if(ajaxObj.errorCount < ajaxObj.errorThreshold) {
                ajaxObj.ticker = setTimeout(getMarkerData, ajaxObj.delay);
            }
        },
        fail: function(jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
            ajaxObj.errorCount++;
        }
    };

    //Ajax master routine
    function getMarkerData() {
        $.ajax(ajaxObj.options)
          .done(setMarkers) //fires when ajax returns successfully
          .fail(ajaxObj.fail) //fires when an ajax error occurs
          .always(ajaxObj.get); //fires after ajax success or ajax error
    }

    setMarkers(locs);//Create markers from the initial dataset served with the document.
    ajaxObj.get();//Start the get cycle.

    // *******************
    //test: simulated ajax
    /*
    var testLocs = {
        1: { info:'1. New Random info and new position', lat:-37, lng:124.9634 },//update info and position and 
        2: { lat:70, lng:14.5144 },//update position
        3: { info:'3. New Random info' },//update info
        4: { remove: true },//remove marker
        5: { info:'55555. Added', lat:-37, lng:0 }//add new marker
    };
    setTimeout(function() {
        setMarkers(testLocs);
    }, ajaxObj.delay);
    */
    // *******************
});
</script>

This is the Single Static Marker:

    0: { info:'You', lat:<?php echo $ulat; ?>, lng:<?php echo $ulng; ?>, icon:'meicon.png'},

and this is the List of dynamic Markers:

<?php echo $vehilcles; ?>

and its output looks like this:

1: { info:'Rooz', lat:-37.8139, lng:144.9634, icon:'carIconr.png'},
            2: { info:'Michele', lat:46.0553, lng:14.5144, icon:'carIconr.png' }
....

could someone please advice on how to keep the Static Marker on the map and just let the Dynamic Markers to move around on the map?

any help would be appreciated.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire