Question

I have a set of 4 marker points all with the exact same lat/long. (different offices within the same street address).

I am using google maps api v3, and there are several instances when I have to plot multiple markers at the same lat/long (IE: different businesses, but in different suites within the same building).

How can i go about rotating a custom marker icon for each of these in a N/S/E/W orientation. (North being the default for all markers when they are zoomed in beyond x zoom level.

If needed i can post up the js for the map plotting.

Answer 1

I can think of one way to solve this problem in the way you pose it. I can think of two other ways to solve the higher-level problem: how to make visible multiple markers which have very close lat/long locations.

“Rotating” markers

Let’s say you start with a list of marker data: lat/long values, and some other data (here, text). Some of the lat/long values are identical or close enough as makes no difference.

markerLatLngs = [
  {lat: 49.010, lng: -133.00, text: "123 Main St #101"},
  {lat: 49.010, lng: -133.00, text: "123 Main St #105"},
  {lat: 49.020, lng: -133.13, text: "246 Cambie St"}
];

You have a custom marker, let’s call its icon and shadow myIcon and myShadow.

myIcon   = google.maps.MarkerImage(...);
myShadow = google.maps.MarkerImage(...);

Make three modified versions of the icon and shadow graphics, rotating them by 90°, 180°, and 270° respectively. Bundle the four sets of marker images up in two four-element arrays:

myIcon90    = google.maps.MarkerImage(...);
myShadow90  = google.maps.MarkerImage(...);
myIcon180   = google.maps.MarkerImage(...);
myShadow180 = google.maps.MarkerImage(...);
myIcon270   = google.maps.MarkerImage(...);
myShadow270 = google.maps.MarkerImage(...);

myIcons   = [myIcon, myIcon90, myIcon180, myIcon270];
myShadows = [myShadow, myShadow90, myShadow180, myShadow270];

Now, process your list of marker data to assign an orientation field to each one. You can do this in JavaScript within the page, but it would be better to do this in the code which generates the marker list in the first place. The first entry at a given lat/long gets an orientation value of 0. The next gets 1, the next after that gets 2, and so on. An entry at a different lat/long gets an orientation value of 0.

There are a lot of ways to do this assignment. You could sort the list by latitude and longitude, so that identical values clump together. You could do a brute-force quadratic search, comparing each entry to each entry which comes after. You could perform sophisticated cluster analysis (see SO question tags cluster-analysis and grouping). Bear in mind that it’s usually error-prone to compare real numbers for exact equality.

In any event, the result is a modified list of marker data, with orientation added.

markerLatLngs = [
  {lat: 49.010, lng: -133.00, text: "123 Main St #101", orientation: 0},
  {lat: 49.010, lng: -133.00, text: "123 Main St #105", orientation: 1},
  {lat: 49.020, lng: -133.13, text: "246 Cambie St", orientation: 0}
];

At the point in your code where you create a marker for each entry in the list, you probably have a call like:

...
m = new google.maps.Marker({
    position: google.maps.LatLng( 
                  markerLatLngs[i].lat, markerLatLngs[i].lng
              ),
    icon:     myIcon, 
    shadow:   myShadow, 
    ...});
...

Change this code to use the orientation field to select the appropriate icon and shadow:

...
m = new google.maps.Marker({
    position: google.maps.LatLng( 
                  markerLatLngs[i].lat, markerLatLngs[i].lng
              ),
    icon:   myIcons[markerLatLngs[i].orientation], 
    shadow: myShadows[markerLatLngs[i].orientation], 
    ...});
...

The above is all pseudocode, so you’ll have to polish it before use, but hopefully it gets the idea across.

Marker Clusterer

A second approach doesn’t rotate your marker icons, but does give a way to solve the higher-level problem, how to make visible multiple markers which have very close lat/long locations.

This is to use the MarkerClusterer utility library. It lets you display a collective marker for sets of markers which are very close together (for instance a marker with an info window listing info for all the included markers). See the MarkerCluster advanced example to get an idea.

Location offsetting

A third approach to solving the higher-level problem is to introduce small latitude and longitude offsets to the positions of markers which are too close together. The result will be a number of closely-spaced markers, instead of multiple markers at the same location.

How big is a “small offset”? It’s a function of your zoom level. To get an offset of, say, four pixels will require twice as large a latitude offset at zoom level 8 as at zoom level 9. You could ignore this, and just generate your marker list with offset lat/longs that will have visible separation when zoomed in enough:

markerLatLngs = [
  {lat: 49.010, lng: -133.00, text: "123 Main St #101"},
  {lat: 49.010, lng: -132.95, text: "123 Main St #105"}, 
                   /* ^^^^^^   longitude offset +0.05 */
  {lat: 49.020, lng: -133.13, text: "246 Cambie St"}
];

Or you could generate an latOffset and lngOffset value for each list entry, in terms of integer units, and calculate latitude and longitude adjustment for a single unit in terms of zoom level. You need to store the offsets in the MarkerOptions dictionary (see SO “Google Maps Marker Data“).

/* list of marker data, with latitude and longitude offset */
/* in integer units                                        */
markerLatLngs = [
  {lat: 49.010, lng: -133.00, text: "123 Main St #101", 
                                  latOffset: 0, lngOffset: 0},
  {lat: 49.010, lng: -133.00, text: "123 Main St #105", 
                                  latOffset: 0, lngOffset: 1},
  {lat: 49.020, lng: -133.13, text: "246 Cambie St", 
                                  latOffset: 0, lngOffset: 0}
];

/* Store original position, and offsets, using marker options */
...
m = new google.maps.Marker({
    icon:      myIcon, 
    shadow:    myShadow, 
    original:  google.maps.LatLng( 
                   markerLatLngs[i].lat, markerLatLngs[i].lng 
               ),
    latOffset: markerLatLngs[i].latOffset,
    lngOffset: markerLatLngs[i].lngOffset
    ...});
...

Then, on every change of zoom level (which requires an update to the latitude and longitude position adjustments), iterate through every marker. Compute a new position, based on the original offsets multiplied by adjustment factors which are a function of the zoom level.

/* update marker positions on each change of zoom level */
adjustLat = fComputeAdjustmentLat(zoomlevel);  
adjustLng = fComputeAdjustmentLng(zoomlevel);
/* iterate through markers. For each marker m: */   
m.setPosition( 
    google.maps.LatLng( 
        m.original.lat() + m.latOffset*adjustLat, 
        m.original.lng() + m.latOffset*adjustLng 
    )
);

This is a bit more complex!

Again, this is only pseudocode, you’ll have to polish it before use. Perhaps one of these three approaches will work for you and future readers.