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
});
}
Related
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.
I know that we can dynamically apply label or icon image or css class to marker of google in angularJs, but I am unable to dig out how we can apply dynamic css style to marker. I have to dynamically generate markers on the google map and color them dynamically. Are we able to do it?
I have tried following but doesn't seems to be working
var putMarker = function(lat,long,color) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,long),
map: map,
labelStyle: {backgroundColor:"#ff00ff", height:"5px", width:"5px", borderRadius:"50px"},
icon: 'img/mapView.png',
label: (markers.length + 1) + '',
animation: google.maps.Animation.DROP,
isDraggable: false
});
markers.push(marker);
//extend the bounds to include each marker's position
bounds.extend(marker.position);
//now fit the map to the newly inclusive bounds
map.fitBounds(bounds);
}
MarkerImage depricated, you can use Icon class.
var customSizeImage = {
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)
};
var marker = new google.maps.Marker({
position: {lat: lat, lng: lng},
map: map,
icon: customSizeImage
});
Thats all.
If you want to display a single textual character on a marker, you can use a marker label. If you need greater customization, you can define an icon to show instead of the default marker image. Defining an icon involves setting a number of properties that determine the visual behavior of the marker.
A marker label is a single textual character that appears inside a marker. You can specify a marker label as either a string or a MarkerLabel object that includes a string and other label properties. In both cases, only the first character of the specified string is displayed on the marker.
When creating a marker, you can specify a label property in the MarkerOptions object. Alternatively, you can call setLabel() on the Marker object to set the label on an existing marker.
Here is some example code:
// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151}
});
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: {lat: -33.890, lng: 151.274},
map: map,
icon: image
});
}
For more information check this page.
Here is my code...
The problem is, I don't know how to stretch the image of icon.
I just want to know if there's a way to stretch the image of icon? if there is, please tell me..thanks in advance
var image = {
url: 'images/arrive.png'
size: new google.maps.Size(40, 40)
};
var markerOptions = {
map: map,
position: new google.maps.LatLng(lati, longti),
icon: image};
Use Like
var icon = {
url: "../res/sit_marron.png", // url
size: new google.maps.Size(width, height), // size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(anchor_left, anchor_top) // anchor
};
position = new google.maps.LatLng(latitud,longitud)
marker = new google.maps.Marker({
position: position,
map: map,
icon: icon
});
Markers
Use scaledSize Property of Google Maps API.
The size of the entire image after scaling, if any. Use this property to stretch/shrink an image or a sprite.
You can see here about scaledSize .
Put this on your code,
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(anchor_left, anchor_top)
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
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.