So ändern Sie Google Maps Markersymbol dynamisch

Question

Ich benutze AJAX und PHP und ich packe alle Punkte aus meiner Datenbank und zeichne sie auf der Karte. Was gut funktioniert. Ich möchte jedoch das Symbol des Markers ändern, abhängig davon, ob der Status in der Datenbank 100 oder 200 oder 300 für jeden Datensatz ist. Ich kann scheinbar nichts zur Arbeit bringen. Hier ist mein Code:

if (localStorage.getItem('type2') !== null) { 


    $(function() 

    { 
     var radius2 = localStorage.getItem("radius2"); 
     var lat2 = localStorage.getItem("lat2"); 
     var long2 = localStorage.getItem("long2"); 
     var type2 = localStorage.getItem("type2"); 
     var city2 = localStorage.getItem("city2"); 
     var rep2 = localStorage.getItem("rep2"); 
     var size2 = localStorage.getItem("size2"); 
     var status2 = localStorage.getItem("status2"); 

     $.ajax({ 
      url: 'http://example.com/Test/www/22233333.php', 
      data: "city2=" + city2 + "&rep2=" + rep2 + "&status2=" + status2 + "&size2=" + size2 + "&type2=" + type2 + "&long2=" + long2 + "&lat2=" + lat2 + "&radius2=" + radius2, 
      type: 'post', 
      dataType: 'json', 
      success: function (data) { 
       $.each(data, function (key, val) { 


        var lng = val['lng']; 
        var lat = val['lat']; 
        var id = val['id']; 
        var name = val['name']; 
        var address = val['address']; 
        var category = val['category']; 
        var city = val['city']; 
        var state = val['state']; 
        var rep = val['rep']; 
        var status = val['status']; 
        var size = val['size']; 

        $('div#google-map').gmap('addMarker', { 
         'position': new google.maps.LatLng(lat, lng), 
         'bounds': true, 
         'icon': 'images/hospital.png' 
        }).click(function() { 
         $('div#google-map').gmap('openInfoWindow', { 
          'backgroundColor': "rgb(32,32,32)", 
          'content': "<table><tr><td>Name:</td><td>" + name + "</td></tr><tr><td>Address:</td><td>" + address + ", " + city + "&nbsp;" + state + "</td></tr><tr><td>Category:</td><td>" + category + "</td></tr><tr><td>Rep:</td><td>" + rep + "</td></tr><tr><td>Status:</td><td>" + status + "</td></tr><tr><td>Size:</td><td>" + size + "</td></tr></table>" 
         }, this); 


        }); 

       }) 

      } 
     }); 


    }) 
} 

Answer 1

Sieht aus wie Sie jquery-ui-Karte verwenden?

Ich habe nicht diese Abstraktion

Sie können rufen Sie die SetIcon Funktion verwendet werden - auf einen Marker, können Sie es auf das Symbol auf diese Weise für die Haupt-API https://developers.google.com/maps/documentation/javascript/reference#Marker

So Ihre addMarker Methode wird wieder eine Markierung gesetzt Beispiel durch das Aussehen davon, so dass Sie einmal laufen lassen SetIcon

Answer 2

Tun Sie so etwas in Ihrer Erfolgsfunktion mit in $ .Each. -Status ist das Datenbankfeld

var size = val['size']; 
var status = val['status']; 
var icon = ''; 
if (status == 100){ 
    icon = 'images/icon1.png'; //your icon1 
}else if (status == 100){ 
    icon = 'images/icon1.png'; //your icon2 
} 
... 




$('div#google-map').gmap('addMarker', { 
     'position': new google.maps.LatLng(lat, lng), 
     'bounds': true, 
     'icon': icon //your dynamic icon 
}) 

hoffe, das hilft