I'm using AngularJS and the gmap module to add markers using a REST API, struggling with the marker icons. i have a JSON data structure that contains the icon as base64
{
"info": {
"off_icon_type": null,
"idle_icon": null,
"description": null,
"icon_type": "image/png",
"color": null,
"photo": null,
"make": null,
"vin": null,
"license_plate": null,
"off_icon": null,
"on_icon": null,
"on_icon_type": null,
"year": null,
"photo_type": null,
"model": null,
"idle_icon_type": null,
"icon": "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAGOklEQVRYha3Xf1DT5x3AcaS2Wp1VrzoqlRMtiPHkZ6AhgIGAAUJIIFEgJCEQEyA/kBAQDD8EFbH+KKCC2lOxKFY7GFWr56+hrdZqd1t767S3rVfv7G3tNm+ncz/0vMx7L8GNrrc/5t2+f3z+SO6b53l9Ps/nefJ9goCg/xULZfXj0d7RV6Vs6nuYULXFF1dQ7wuX2Xyvpq72Lcz1+CIXr/AlJGoeWl0bq/79/LOM/UwPBQZrGxozxieonihtW7F8+UckFT0sse4lyj7AEvNuxM79xChcJEq0T1rb+oyCArp3HZ6VIFY9sXoPUFu3m/zmEcJkHvyTEJLbRXjJHsJ020npOscKVTVJydonO/uHZgkGyMkrPyDLNGKydmCv7UHRNIwouZywSA2vRKoJS2tAZNpLXFo5SlUNy+I0uOt3HBAMkChdeVeZ52RtUx929zaMXSdQaN1k5zpZvrwSWaaTFFklScvNSMxvMm+RHHXLu3cFA0jlpffcTTvZeeA0TlcHmRu8iMVZzHh5ATPESmaFJpCQrKYsr5WCzlOEzM8gvXrfPeGWQGmjpeUtFi+VEhQ8hQjRSxwf7aS6uh5FdhER7joiMmcyLWUSzVuXIsm0EJNZjWCAcksbSRIVwZOnMHXmXOYumMve0wdZ/2YrlhYj+o2FZHnSiDREMiV9GnO2NBIjVgsHqGnew2KRlMnTZzNp0iReDQ2ju6efOk8DBo8LhVONSLuKRSvzCNUsoC1ESa7GJgzg3VtfPtDVbPd3dgbBwc8T9FwQ7q1eth8+4l8CB4Z6Bzk1WiIiY3hNpWGmdB7bYpNIyy5jaPjgg/8b4G3tfGQztJCgrxsHVGoLOfPF+zRua8BWZiC3LAtxiZiF6YkskotYlDqN2F0bsPb+mD37Dz0SZAlG9Gria7cQ/Px0yisc1OetI2qpmNjY11myNBGNOITkpDnMiIsjaGY4i5fJKbI0C9cD+9uW815hC3+4/5Df/fkxn9+5z43b9ybio89/y4XLP+e99z/i8NBFMvzlzy2pEw7Q3ZtIlWs9v//T37j913/w06//MjH5tV/d5eLVm5w6e51jw5c5dPg8sgwTirf2Cgfo2LQM0+q1fHP/0feyv37rWy7f+A2nz99g5MQVBo9cYODQOf+pWMwOg0w4wOatSZhHdvPV/cd8cufBBODqZ3c4e+kzTpy+xtHjYwy8fW4cIF3Tjb03RzjAxlox5sZufvHt3ycm//irexOlD2T/tr/0gckDCInKQXGPUjhAtNKCvtQ1sfbXf32XDz+9w5kLn3yX/aGn2Q8OXSBN52GTIlE4QExcJkUlju8a7+Y3nL9yazz74dEPJ7IPNODQsTFk5e2EZJuEAyRL1awssf9X430ve3/pA1vw2MhlMuQmRCq7cACFwoj2X4DAnj936dPx7Mf3/dGL44BAFY4ev+T/l/yAdLmelNXrhQNoV1VT6F+C/8z+5JmPGT319OAJlD4ACWQfAKRlFJPlf3sSDGAweihcWT3e+WPXvhhvvkAFAoDA3g/EOz96mn0gVAV2/zGdKxyg3LaOIn0NQ++coG1TLwODI5w5f4WLY9e4Ofw1v+zdT+fmPozWBkwmD2p1DaLoLOEA7uZeKtd0Ys/PZvpLcwgNFyFOjyBeFU28JpoF0lf4YUQs08KiiIpOpbikCUmqVjhA64Z+Oo5cIVdZhNxux+xQkW9Vo1tTSnaVhdKWCpSVBuQ6K6GSQj+gEU2hQziA09VJa/cwcmUJOl0ZXr0RtSWPimYb+nVeihps7NrdgEJVzOx5UWi0teiK3cIBLJYWmrx9xIszCI9OxuFsoL++ke37mtg82E7bPi+rDBaem/wis+eEk51XhaWyXTiAzT9YRWUbeToHISlK/68mM/WFGcSkyomLf50Xpk73fxfEiz942f85i1XGtdSt7REO0LVj4GxBsQun5w1Mzi3kWzaQUbaOtBU6UnNKSU7NIztHz+oqLyZzM8WGRmrqt50VDPCTD342v2bNG49z8m0o1U7yC9z+K5gbRU4tK3JryVHXYq5sxWD2+Lu/ALWu8vHBwZPzBQMEbronT16VuNxdtwuL3L5sXZ1PmlHhS0gz+eJSzT5pltWXLi/zGU31vvZN/bdHRy9JnvV2/E8cKLT6vGaxsgAAAABJRU5ErkJggg=="
},
"associations": [{
"vehicle_id": 5,
"time": 1415635751.9619999,
"id": 5,
"association": true,
"device_id": 356612026425225
}],
"assets": [],
"name": "05 C 28012 SWEEPER",
"groups": [4, 6],
"device": 356612026425225,
"id": 5,
"counters": {
"dev_dist": 18504360,
"dev_ospeed": 34360,
"dev_ign": 2209016,
"dev_idle": 803115
}
}
i have a click event to load the icon from the data structure like this
$scope.select_vehicle = function(vehicle){
$scope.selected_vehicle = vehicle
$localStorage.vehicle = vehicle
$http.get(_server+'vehicle/'+vehicle.id+"/remote/location")
$scope.map = {
center: vehicle.location.coords,
zoom: 16,
};
$http.get(_server+'vehicles/'+vehicle.id)
.success(function(data){
var image = data.info.icon
var marker = new google.maps.Marker({
icon: image,
title: data.info.name
})
})
}
I think i'm getting close since i can use the map object in this click event to zoom in, its just loading the marker from this url, any hints on the logic for this would be terrific!