Question

I’m using Gmap3 (a jquery wrapper for Google Maps API v3), but this question should apply to any implementation.

My map has a few thousand markers (written into a JSON variable via PHP). For all these, there are only 5 possible icons. What I’m looking for is a way of referencing the icons, rather than including them entirely in the JSON each time, which, since there are only 5 of them, is ridiculously inefficient.

So I want to declare the icons in the JS, and add a simple identifier in the JSON.

What’s the right way to do this? A loop?

// JSON generated by PHP or whatever
var myMarkers = [
    { lat:12.34567, lng:123.4567, data:"Blah blah", options: { icon: img1 } },
    { lat:21.23456, lng:123.4567, data:"Blah blah", options: { icon: img2 } },
    { lat:32.12345, lng:123.4567, data:"Blah blah", options: { icon: img3 } },
    { lat:43.21234, lng:123.4567, data:"Blah blah", options: { icon: img1 } },
    { lat:54.32123, lng:123.4567, data:"Blah blah", options: { icon: img2 } },
    { lat:65.43212, lng:123.4567, data:"Blah blah", options: { icon: img3 } },
    { lat:76.54321, lng:123.4567, data:"Blah blah", options: { icon: img1 } }
    // ... add 2000 more records here ...
    ];

var img1 = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png');
var img2 = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png');
var img3 = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png');
var shadow = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_shadow.png');

$('#map_canvas').gmap3({
        action: 'init'
    },{
        action: 'addMarkers',
        markers: myMarkers,
        marker: {
            options:{
                // icon: markers.data.options.icon, or nothing, or what??
                shadow: myShadow
            }
        }
    }
);

Answer 1

I would have an array of marker images. Your JSON struct should just need to reference the index of the array. Or use an object as a hash map instead.

var myMarkers = [
    { lat:12.34567, lng:123.4567, data:"Blah blah", options: { icon: 0} },
    { lat:21.23456, lng:123.4567, data:"Blah blah", options: { icon: 1} },
...
];

var imgs = [
    new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png'),
    new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png'),
    new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png')
];

Then get the JSON and update it, in a loop.

for (var i = 0, len = myMarkers.length; i < len; i++) {
    myMarkers[i].options.icon = imgs[myMarkers[i].options.icon];
}

then I assume you simply need to specify the shadow? (never used gmap3)

 marker: {
            options:{
                shadow: myShadow
            }
        }