Failed to instantiate google.maps.Icon - google-maps

Question

I tried to instantiate google.maps.Icon,
var icon = new google.maps.Icon({
anchor:new google.maps.Point(0,0),
origin:new google.maps.Point(0,0),
scaledSize: new google.maps.Size(10,10),
size: new google.maps.Size(10,10),
url:"http://maps.google.com/mapfiles/kml/paddle/purple-square.png"
});
But I got the error,
Uncaught TypeError: undefined is not a function

Answer 1

I can't get this to work: What is the construct interface `google.maps.Icon` (Example)
For me it works with an anonymous object:
var image = {url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 32)};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
});
Example from the documentation
Example with your icon
code snippet:
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
setMarkers(map, beaches);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = {
anchor: new google.maps.Point(16, 32),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(32, 32),
size: new google.maps.Size(64, 64),
url: "http://maps.google.com/mapfiles/kml/paddle/purple-square.png"
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: beach[0],
zIndex: Math.round(myLatLng.lat() * -100000) << 5
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
#media print {
html,
body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Answer 2

google.maps.Icon is a Javascript object literal and not a class. I didn't know this till 5 minutes ago when I was trying to solve the same problem.
The google maps API docs:
https://developers.google.com/maps/documentation/javascript/overlays#ComplexIcons
give an example of converting from the deprecated MarkerImage (v3.9) to Icon (v3.10+)
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
becomes
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
So Allen (and I) tried to use a constructor new google.maps.Icon() which doesn't exist. Just remove that text leaving var icon = {<list of properties>}; and everything should work.
The google API ref:
https://developers.google.com/maps/documentation/javascript/reference#Icon
doesn't make this very obvious.
I also went to educate myself about object literals - you can find the explanation at mozilla - search for javascript object literals - I can't post the link as this is the first answer I have given on stack exchange and I need more points to add more than two links!