CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Bill paxton
Bill paxton

Reputation: 95

How to change google maps marker icon dynamically

I am using ajax and php and I grabbing all of the points out of my database and plotting them on the map. Which works fine. However I want to change the icon of the marker depending on if status in the database is 100 or 200 or 300 for each record. I can't seem to get anything to work. Here is my 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);


                    });

                })

            }
        });


    })
}

Upvotes: 0

Views: 10188

Answers (2)

Shaun Hare
Shaun Hare

Reputation: 3871

Looks like you are using jquery-ui-map?

I haven't used this abstraction

You can call the setIcon function - on a marker you can set it's icon this way for the main API https://developers.google.com/maps/documentation/javascript/reference#Marker

So your addMarker method will return a marker instance by the look of it so once you have that run setIcon

Upvotes: 1

jems
jems

Reputation: 128

Do something like this in your success function with in $.each. Status is the database field

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
})

Hope this helps

Upvotes: 0

Related Questions