We Keep Coding

Google Maps : Change markers color only if they are in same location

Is there an easy way to change the google map marker icon but only if they are exactly on same location ? For example, all my markers are blue, but at the coord 48.2, 67.5 are placed 2 markers, so I want them red.
ps : I use Overlapping Marker Spiderfier if it can help.

If you're using Overlapping Marker Spiderfier then you must be keeping an array of markers correct?
The simplest way would be to loop through the array each time you create a new marker and check the coordinates. If they match then swap the icon of both to the new colour.
Information on changing the icon itself can be found at: Adding custom google map marker / pin (color), there's a few options there.

Move/Displace Marker Coords for showing extra information on Marker

I have a few Makers into my Map using Google Maps API v3. They are located by a LAT and LONG coords, and show default marker (A, B, C).
But now I want to show for each marker another marker displaced (or moved) a few pixels from default maker,
like this image:
The square must be a small div coloured.
How I must write the new Marker?

Markers cannot be created from DOM-elements(e.g. div's).
You must create a custom overlay
MarkerWithLabel should be a good choice to achieve it.

How to place multiple icons for Google map markers in v3?

I'm trying to create a map similar to this (which is using v2 of the API). I want each marker on the map to consist of an image with a frame or background behind like so.
Using the icon and shadow MarkerOptions doesn't seem to accomplish this because a markers shadow falls behind other markers icons.

You can use an excellent little library, RichMarker. Its documentation is here.
To make usage easier, you can even create your own custom marker class, something like this:
Ns.Marker = function(properties) {
RichMarker.call(this, properties);
this.setContent('<div class="three-images-marker">' +
properties.NsImage ? '<div class="marker-image-1"><img src="'+properties.NsImage1+'"/></div>' : '' +
properties.NsFrameImage ? '<div class="marker-image-2"><img src="'+properties.NsImage2+'"/></div>' : '' +
'</div>');
};
Ns.Marker.prototype = Object.create(RichMarker.prototype);
// and use it like this:
var yourFramedMarker = new Ns.Marker({
position: yourMarkerLatlng,
map: yourMap,
NsImage: 'example.com/image.png',
NsFrameImage: 'example.com/frame.png',
});
'Ns' is whatever namespace you use, if you do.
From here on it's CSS work, you can position the images as you like.

I think you'll have to merge the images with the marker backgrounds. When I was building something similar I used CSS sprites and calculated the vertical offset (vPos), based on a standard height. I just didn't bother with the shadows.
var mImage = new google.maps.MarkerImage("YOURMARKER.png",
new google.maps.Size(34, 35),
new google.maps.Point(0, vPos),
new google.maps.Point(10, 34)
);
//insert marker
marker = new google.maps.Marker({
icon: mImage,
position: new google.maps.LatLng(latitude, longitude),
map: map
});

yes, marker shadows are all placed in the separate layer - below all markers. You have to merge the background and photo into one icon image, or create a new class which would inherit from MarkerImage.

Google Maps API V3 fromDivPixelToLatLng not consistent

I need to place a marker at a fixed pixel location within the map's div. To instantiate a marker, you need a LatLng. I understand that fromDivPixelToLatLng() is the way to convert from pixel co-ordinates to a LatLng, but I can't get it to behave consistently.
I have posted a simple example of my problem at http://www.pinksy.co.uk/newsquare/overlaytest.html. Click on the map to place a marker at 200px/200px. Drag the map around and click again. I was expecting a marker to be placed at 200px/200px every time, but this is not the case.
First I set up the map as usual, in a 600px by 300px div:
var london = new google.maps.LatLng(51.501904,-0.130463);
var mapOptions = {
zoom: 15,
center: london,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Then I create an overlay:
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
To test fromDivPixelToLatLng(), I create a click event on the map, which attempts to place a marker at pixel location 200px/200px. Regardless of where you drag the map, I was expecting the marker to always be placed at 200px/200px:
google.maps.event.addListener(map, 'click', function(event) {
var pixelLatLng = overlay.getProjection().fromDivPixelToLatLng(new google.maps.Point(200,200));
var marker = new google.maps.Marker({
position: pixelLatLng,
map: map
});
});
However, drag the map around, and you will see that the marker is not always placed at 200px/200px. Any ideas?
Thanks!

After experimentation, I have found that fromContainerPixelToLatLng() is what I'm looking for. For the benefit of others, I have posted an example at http://www.pinksy.co.uk/newsquare/overlaytest2.html.
(For the record, I'm still unsure why fromDivPixelToLatLng behaves the way it does, but never mind!)

Check the demo under:
http://jsbin.com/otidih/51 for some more experiments on this.
To get the logging start the console - most things are logged there.
Detailed explanation from this groups post.
A shorter version below:
The ContainerPixel is calculated relative to your map container. If you pan the map, then the ContainerPixel of LatLngs changes.
The ContainerPixel of things that don't move with the map (float) doesn't change.
For example, the ContainerPixel of the mapCenter stays the same if you don't resize the map:
overlay.getProjection().fromLatLngToContainerPixel(map.getCenter())
The DivPixel is calculated relative to a huge Div that holds the entire tilespace for the world at the current zoom level.
overlay.getProjection().fromLatLngToDivPixel(point)
If you do not change the zoom level and move (pan) the map, then the DivPixel of anything that moves with the map will stay the same. For example the DivPixel of a given city on a map will stay the same, even if you move the map. It will only change when you change the zoom level or cross the international dateline.
Please note that the actual reference point used for calculating the DivPixel gets reset
whenever the map zooms, so the same LatLng can have different DivPixel values even when you come back to the same zoom level.
Also to be considered is the Point value returned from
map.getProjection().fromLatLngToPoint()
which is well explained in the API Reference
It translates from the LatLng cylinder to the big point plane which always stays the same (no matter which zoom level). Given LatLngs will always map to the same Point.
The (0,0) point is the (85.0511287798066,-180) LatLng - where to Google Map cuts of (if you want to know why , read about the Mercator projection)

Google Maps API - Markers

I'm trying to add markers to a map on my page using Google's Javascript API. I know how to do this simply, just with little marker images in various spots on the map, however, I want this to be a little bit cooler.
I want to place transparent circles (tiny ones), on the map in place of markers, but make it so when they are crowded in one area, they layer on top of each other (obviously), and create a darkening effect, so you can kind of see where things are more crowded at a high level, not just a crazy amount of the same exact image marker (which would look really sloppy and weird).
Have any of you done anything like this before, or should I be approaching this differently?

Like a heat map?
http://code.google.com/p/gheat/ or http://www.heatmapapi.com/

Have a look on that page :
http://florent.clairambault.fr/add-a-circle-overlay-to-google-maps-api-v3
I think this is what you want.

try making it a shadow. Shadows layer on top of each other like your described. Example:
var shadow = new google.maps.MarkerImage('/images/pin_shadow.png',
new google.maps.Size(27,30),
new google.maps.Point(0,0),
new google.maps.Point(0, 19));
var marker = new google.maps.Marker({
shadow: shadow,
(otherproperties here),
});
Let me know if this works.
Kevin