The docs of Google Maps V3 JS API does not seem to give the interface of the construct of google.maps.Icon
. I found an example with MarkerImage
, which seems to be deprecated now.
So, what are the possible google.maps.Icon
construct parameters and what is their order? How to define icon size, icon offset in sprite, icon anchor, etc?
Edit:
How would I create an icon and assign it to a marker? Eg (not tested/does not work):
var icon = new google.maps.Icon(path,
new google.maps.Size(32, 32), // size
new google.maps.Point(0, 32), // offset in sprite
null, // anchor
);
I do see the docs but I do not see example usage if that class!
The Google Maps pin is the inverted-drop-shaped icon that marks locations in Google Maps. The pin is protected under a U.S. design patent as "teardrop-shaped marker icon including a shadow". Google has used the pin in various graphics, games, and promotional materials.
Use a custom iconRight-click the placemark you want to customize. Click Properties (Windows, Linux) or Get Info (Mac). At the top right of the "Edit Placemark" or "Edit Folder" window, click the icon. Choose Add Custom Icon.
Click the name of the pin you've just added on the menu panel on the upper left corner of the web page, and click the paint bucket icon next to it. A small dialog box with a color picker will appear. Click "More Icons" on the box, and a larger dialog box labeled "Choose your icon" will show.
There is no constructor for the google.maps.Icon, it is an anonymous javascript object like MapOptions, MarkerOptions, PolygonOptions, etc.
You use it like this:
var icon = {
anchor: new Point(...),
url: "myurl"
// etc..
};
From Oliver in a comment: The point is: there is no such class (or function, for that matter) as google.maps.Icon. The API docs refer to it as google.maps.Icon object specification (here), as opposed to e.g. the InfoWindow class.
Hmm... Now, this answer is just wrong.
You can't
var icon = new google.maps.Icon({
anchor: new Point(...),
url: "myurl"
// etc..
});
It's an object literal, which means that you can just use it like this:
var icon = {
anchor: new Point(...),
url: "myurl"
// etc..
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With