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
});
}

Trouble with multiple google maps on one table

I have an html table that contains 10 container for Google map
Below is the js function that create the map object
Function takes the lat and the lng of the map + the div element to insert the map to.
function GetMap(lat,lng,number)
{
var show_in=document.getElementsByClassName("map_conteiner")[number];
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(show_in,
mapOptions);
var marker = new google.maps.Marker({
position:new google.maps.LatLng(lat,lng),
map: map,
title:"Hotel"
});
$(show_in).fadeIn();
}
The problem is that the map is displayed correctly only on the first invoke of this function
(No matter which div I start with)
after the firts invoke this function will allways present distorted maps (As you can see in the attached picture)

You should trigger the resize-event of the map in the complete-callback of $.fadeIn()
Furthermore you better create only 1 maps-instance for each map_conteiner and on subsequent calls of GetMap only set the new center of the existing map and the new position for the marker.

Showing additional marker in google map through ajax

I have created a google map using "maps.googleapis.com/maps/api/js?v=3". In that map I am showing markers for different locations, which is working fine. Below is the code which i have used.
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
});
Now I want to add some more location markers in Ajax. For ex: I will add the location name from a dropdown, it will do an ajax call to the server side. Pull out the location latitude and longitude and will show in the map. How can i achieve it.
I have written a separate js function to do the ajax call, but inside that the code is not getting 'map' instance.Here I have used only this code
new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
Here I am not initializing the map again. So its not getting the map instance and throwing error. How to fix it.

The scope of your map is limited to inside your event handle. Try this:
var map, markerCollection;
google.maps.event.addDomListener(window, 'load', function() {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
function addMarker(lat, lng){
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lng),
});
markerCollection.push(marker);
}
NOTES:
1) Be to fill in the values for "latitude" and "longitude" when defining the center of your map. Otherwise you just would get a map displayed.
2) I know it might not be the best practice to add your markers into an array but I find this makes than easy to access latter.

Since map is not a global variable it is getting dereferenced. Make the map object either global or within a container function that stores all of your code.
Global JS example
//now it's global
var map;
google.maps.event.addDomListener(window, 'load', function () {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
});

Custom Google Maps Icon Using Sprite

I've found custom Google Maps icon images that can be laid out as a sprite (matrix of small pics). I effectively want to create custom icons which are numbered 1-10 (for my 10 results per page) and also have mouseover effects (change color).
I'm not sure how to do this. The relevant code is the following:
$('.entries').each(function(index){
var entry=$(this);
latlng[index]=new google.maps.LatLng($(this).attr('data-lat'),$(this).attr('data-lng'));
marker[index]=new google.maps.Marker({
position:latlng[index],
map:map,
icon:image_url
});
if(marker[index]){
marker[index].setMap(map);
}
Even if I can't make it a sprite (which seems unlikely right now) I'd like to change the icon on mouseover.
I've tried to do so and created a hack that SORT of works. The problem here is that the map flickers occassionally when reset. Is there a better way?
google.maps.event.addListener(marker[index],'mouseover', function(){
entry.addClass('map-hover');
// alert(marker[index].icon);
marker[index].icon='{{site}}media/map-icons/iconb'+(index+1)+'.png'
marker[index].setMap(map);
});
google.maps.event.addListener(marker[index],'mouseout', function(){
entry.removeClass('map-hover');
marker[index].icon='{{site}}media/map-icons/iconr'+(index+1)+'.png'
marker[index].setMap(map);
});

function initialize() {
var mapDiv = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(mapDiv, {
center: latLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}
​
This code might help you to get an idea about placing custom markers.