We Keep Coding

Error: google.maps.number is not a constructor ,when rotation property is added to Icon or marker in google maps using javascript

I have added a customized icon to google maps and added rotation property to icon and when i run the code i get an error indicating " google.maps.number is not a constructor" can someone help me how to solve this problem.
var icon = {
url: 'newimage/unnamed.png', // url
scaledSize: new google.maps.Size(25, 25), // scaled size
origin: new google.maps.Point(0,0), // origin
rotation: new google.maps.number(90)
};
//var myLatLng = {lat:50.8274, lng:12.9161};
var myLatLng = {lat:global_latlon.lat, lng:global_latlon.lng};
var test_marker = new google.maps.Marker({
position: myLatLng,
map: map,
lat: myLatLng.lat,
lng: myLatLng.lng,
clickable: true,
name: 'test_marker',
title: 'test_marker',
offset: 0,
icon: icon
});

You are receiving the error because there is no class called number which exists in google.maps.number package.
A google.maps.Icon has the following properties
anchor
labelOrigin
origin
scaledSize
size
url
Rotation is not one of them. Refer to the the Google Map documentation : Icon for further reference.

Marker obstructing the location name in google map

I have created a marker for some location but the problem is , the marker keeps obstructing the location name i want the marker to go beneath the location name without changing the current zoom level.Is there any option that can be added in the constructor
var marker = new google.maps.Marker({
//options
});
Thnx
Example https://jsfiddle.net/vng1pbkf/

One option could be to reduce the size of your marker image.
sample code:
var image = {
url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
};
var marker = new google.maps.Marker({
position: {lat: 25.2523934, lng: 55.3336367},
map: map,
icon: image
});
}

Round images for map pins

I am having trouble with Google Map Markers. I am wanting to have a round image as the pin for the map. After looking around, it seems like it is not possible. So i'm wondering if i could maybe change what i have below (which works for placing square images on the map) and crop the image before giving it to the iconimage object? So I take the image, cut it to shape, then place it as the iconimage.
Any help would be great!
Thanks
angular.forEach(data, function(data){
var iconimage = {
url: "https://graph.facebook.com/"+data.facebookid+"/picture?type=small",
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0,0),
optimized: false
};
var friendPin = new google.maps.Marker({
position: new google.maps.LatLng(data.location.latitude,data.location.longitude),
map: googleMap.map,
icon: iconimage,
});
friendPin.setMap(googleMap.map);
});

Google Map marker disappears after drag

When I move a marker to top of my map and out of view (see image below), it gets a high opacity which makes the marker close to invisible.
This bug only happens in Safari and I really have no clue what might be causing this.
If you look close at the second image you can see the marker.
var myMarker = new Array();
$(function () {
latitude = 59.3294;
longitude = 18.0686;
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 4,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
}
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var id = 1;
var image = {
url: 'http://i.imgur.com/4yjea7s.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(33, 42),
// The origin for this image is 0,0.
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(16, 42)
};
myMarker[id] = new google.maps.Marker({
position: new google.maps.LatLng(57.721035,12.939819),
map: map,
animation: google.maps.Animation.DROP,
draggable: false,
icon: image
});
google.maps.event.addListener(myMarker[id], 'click', function() {
var image = {
url: 'http://i.imgur.com/1eHR1c3.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(108, 141),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(54, 0)
};
myMarker[id].setDraggable(true);
myMarker[id].setIcon(image);
});
});
jsfiddle:
http://jsfiddle.net/S5T9b/1/
http://jsfiddle.net/S5T9b/1/embedded/result/
Steps to reproduce the error:
Click on a marker on the map
Drag the marker to the far top of the map div and drop it.
The marker should now be almost invisible but if you look closely it's still there.
And you can still click on it again and move it - It then becomes visible again.
Is it a programming issue by me or is this a google maps bug in Safari?

I am pretty sure this is a Google maps bug. However I got it to work by using this solution:
You have to both specify a zIndex and add
optimized: false
to every marker constructor, eg.
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: resultIcon,
optimized: false,
zIndex: 5
})
Copied from :
https://stackoverflow.com/a/12061606/1679809

Works fine for me in Safari using Windows 7. It is possible that this is just a tiny bug, since from your code I can't see anything that would cause the code to work fine on all browsers except Safari.
I'm not sure if these guys have the exact same problem as you, but it might be worth checking the links out anyway:
http://www.google.com/support/forum/p/maps/thread?tid=56c196bd9ad37c24&hl=en
http://www.google.com/support/forum/p/maps/thread?tid=26db8fd040386548&hl=en
Why are Google Map markers showing up on Firefox by not on Chrome, Safari and Internet Explorer

Google map marker sprite image position

How can we position the sprite image as Google map marker. For eg: In css we are positioning the image like
background: url('../images/bodycss/pointer.png') 28px -32px;
Now how can I include the above code to the below google api-v3 function ?
function setMarkers(map, markers) {
var google_image = new google.maps.MarkerImage("http://example.com/images/bodycss/pointer.png");
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
zIndex: sites[3],
html: sites[4],
icon: google_image
});
google.maps.event.addListener(marker, "mouseover", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}

To create a MarkerImage from a sprite image, you need to specify the origin and size of the section of the image you want to use to create the icon.
var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34));
You can have a look at this Blog post that describes it well
Update- See this working Fiddle- DEMO(sprite url is dead)
I have used this image- http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4(sprite url is dead) and adjusted the size and point values for the icon.

Before the MarkerImage class became deprecated (which means it's still supported, but should be replaced) in favour of the Icon object, you might have written something like this for a simple image:
var qthIconHouse20 = new google.maps.MarkerImage( 'grafx/house_icon_20.png',
new google.maps.Size(20, 20),
new google.maps.Point(0, 0),
new google.maps.Point(10, 10) );
Now, using the Icon object, you would write this:
var qthIconHouse20 = {
url: 'grafx/house_icon_20.png',
size: new google.maps.Size(20, 20),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(10, 10),
scaledSize: new google.maps.Size(20, 20)
};
Note the extra scaledSize parameter: for simple images, this is the size of the original image - which in this particular case is the same as the size parameter.
For sprites, where you have several images contained in a single image file, you might use something like this:
var qthIconBlueSpot16 = {
url: 'grafx/qth_icon_spots_16.png',
size: new google.maps.Size(16, 16),
origin: new google.maps.Point(0, 32),
anchor: new google.maps.Point(8, 8),
scaledSize: new google.maps.Size(16, 48)
};
Note that, in this example, the origin has been specified as (0, 32) in a sprite containing multiple 16*16 pixel images: so here, we're selecting the third image in the sprite. Within that portion of the image, we set the anchor to (8, 8) - i.e. in the middle of the selected portion of the image to be displayed. Finally, the scaledSize here refers to the size of the entire sprite image.

You can use the anchor property of a MarkerImage which, as documented here overrides the default position:
The position at which to anchor an image in correspondance to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.
p.s. MarkerImage is deprecated, and you should consider using icon instead.