Search code examples
asp.netgoogle-mapsjquery-pluginsbing-mapspushpin

What jQuery map plugin allows specifying the color of the pushpins?


I have used the goMap jQuery plugin for some easy and simple programmatic placing of pushpins on Google maps; I'm going to create a site, though, where various "categories" of places are shown simultaneously, and I want to differentiate them visually by making each group/category a different color.

Is anybody aware of either how this can be done in goMap, or which jQuery plugin makes it possible? I'm not married to Google maps; Bing maps would be fine, too.


Solution

  • It seems there are two good possibilites. One is to use gmaps.js (http://hpneo.github.io/gmaps/examples/static_markers.html) which lets you specify a color like so (in the third of the three markers added below):

    url = GMaps.staticMapURL({
      size: [610, 300],
      lat: -12.043333,
      lng: -77.028333,
      markers: [
        {lat: -12.043333, lng: -77.028333},
        {lat: -12.045333, lng: -77.034, size: 'small'},
        {lat: -12.045633, lng: -77.022, color: 'blue'}
      ]
    });
    
    • and the other is goMaps, which I've already used, which has an icon property you can set to a .png file. The example can be seen here: http://www.pittss.lv/jquery/gomap/examples/marker_multi.php using this sort of code:

      $(function() { $("#map").goMap({ markers: [{
      latitude: 56.948813, longitude: 24.704004, title: 'marker title 1' },{ address: 'Mokelumne Hill, California, USA', title: 'marker title 1' },{ latitude: 55.548813, longitude: 23.204004, draggable: true, icon: '../img/drag.png', html: { content: 'drag me!', popup:true } }], icon: '../img/apartment.png' }); });

    Now I have a separate question, though, regarding how to use a spriteful of pushpin images (How can I use a sprite to specify the pushpin png I want to use in a map?)