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

Question

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.

spacebean · Answer 1 · 2013-11-04T23:11:34.857

1

You don't really need a plugin, just create the different markers in your js, for example:

App.pinColor1 = '37BDED';
App.pinColor2 = 'AA0774';
App.pinImage1 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=home|" + App.pinColor1,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
App.pinImage2 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=books|" + App.pinColor2,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
App.pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));

And then where you create the marker (along with your other options):

App.marker = new google.maps.Marker(
{
  icon: App.pinImage1,
  shadow: App.pinShadow,
});

edited Nov 04 '13 at 23:11

answered Nov 04 '13 at 16:22

spacebean

1,554
1
10
13

It's just the namespace I was using for that application: http://stackoverflow.com/questions/881515/javascript-namespace-declaration You can declare them as normal variable names (e.g. 'var pinColor1 =') etc if you prefer. – spacebean Nov 04 '13 at 21:35
I do not find you ("spacebean") at that link, nor a reference to "app." there. – B. Clay Shannon-B. Crow Raven Nov 04 '13 at 21:41
No, that's just a link with some info about namespacing (which is the 'App' in the code) I thought might be useful. Like I said, if you don't use namespacing then just declare them like normal variables. – spacebean Nov 04 '13 at 23:13

score 0 · Accepted Answer · edited May 23 '17 at 12:21

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

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

2 Answers2

Linked