Dynamic updating of Google Maps markers



  • There's a Google Maps map on which the markers are located. The markers are taken from the database in which their coordinates and categories are recorded. Only markers of this category shall be displayed on the map if requested.

    The markers need to be updated dynamically, i.e., when clicked on a certain point. div Only the type chosen markers were displayed.

    There is also a need to make choices for several categories.

    Please indicate how this can be implemented.

    As another solution to the problem, current coordinates (lat, lng) of maps and zoom need to be obtained and transferred from get request.



  • If the problem has not yet been solved,

    ** deleted all previous proposals and rewritten **

    Okay, here's the description and the following example.
    (CSS can ignore)

    HTML

    • create divwhere the map will be
    • create three. div with buttons that will show/seal markers on the map
    • Each button has an attribut. data-category="[имя-категории-этой-кнопки]"♪ Later, in JS, we will use this value to compare to label categories.

    JS

    • object map being empty out of all functions because we'll need it in a few functions.
    • Creating a map with some attribut and empty spaces markers
    • Create six markers (I understand you'll have them in the php cycle). Make sure each marker has its own variable.marker1marker2 etc.), however, if there's nothing in the code to do with this variable, you're not going to use it, but working with a set of markers, then there's no need to create different variables. Once the marker is created and added map.markers, variables marker1marker2 And so on, they won't be necessary.
    • Also note that each marker has an additional attribute. category(laughs) filter: {type='category';}but it turns out to be easier. It's this attribut we're gonna use for the labels on the map.
    • Each marker is added to the marker array. map.markers.push(markerХ);
    • for each button .markerBtn event created click

    On the button markerBtn

    • We'll find the meaning. data-category knots
    • We're going through the mass. map.markers
    • for each component of the mass shall be compared ['category'] Marker with a pressed button category
    • If it matches, we turn it off.

    var map = {};
    

    function initialize() {

    var mapProp = {
    center: {
    lat: -25.363,
    lng: 131.044
    },
    zoom: 8,
    markers: []
    };

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    var marker1 = new google.maps.Marker({
    position: {
    lat: -25.363,
    lng: 131.044
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    map: map,
    category: 'blue',
    });
    map.markers.push(marker1);
    var marker2 = new google.maps.Marker({
    position: {
    lat: -25.664,
    lng: 131.044
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
    map: map,
    category: 'green',
    });
    map.markers.push(marker2);
    var marker3 = new google.maps.Marker({
    position: {
    lat: -25.365,
    lng: 131.144
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
    map: map,
    category: 'red',
    });
    map.markers.push(marker3);
    var marker4 = new google.maps.Marker({
    position: {
    lat: -25.366,
    lng: 131.244
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    map: map,
    category: 'blue',
    });
    map.markers.push(marker4);
    var marker5 = new google.maps.Marker({
    position: {
    lat: -25.565,
    lng: 131.144
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
    map: map,
    category: 'red',
    });
    map.markers.push(marker5);
    var marker6 = new google.maps.Marker({
    position: {
    lat: -25.666,
    lng: 131.244
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
    map: map,
    category: 'green',
    });
    map.markers.push(marker6);

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

    $(document).ready(function() {
    $('.markerBtn').bind('click', function(el) {
    var catToToggle = $(this).attr('data-category');
    $.each(map.markers, function() {
    if (this['category'] == catToToggle) {
    this.setVisible(!this.getVisible());
    }
    });
    });
    });

    .markerBtn {
    float: left;
    cursor: pointer;
    }
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <div id="googleMap" style="width:500px;height:380px; "></div>
    Нажмите на маркер слева, чтобы скрыть/показать на карте
    <div class="markerBtn" data-category="green">
    <img src="http://maps.google.com/mapfiles/ms/icons/green-dot.png" width="50">
    </div>
    <div class="markerBtn" data-category="red">
    <img src="http://maps.google.com/mapfiles/ms/icons/red-dot.png" width="50">
    </div>
    <div class="markerBtn" data-category="blue">
    <img src="http://maps.google.com/mapfiles/ms/icons/blue-dot.png" width="50">
    </div>

    I hope that using this option as an example you can get your code to work.

    Good luck.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2