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.
Related
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
});
}
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);
});
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
I've got a Google Map with a few different types of icons. I've got a shadow on each icon. How can I adjust the marker shadow's offset from the marker?
In the loop that builds each marker, I've got:
var icon = customIcons[type];
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
The icon gets set by type.
var customIcons = {
Football: {
icon: 'http://path-to-image1.png',
shadow: 'http://path-to-shadow-image1.png'
},
Lacrosse: {
icon: 'http://path-to-image2.png',
shadow: 'http://path-to-shadow-image2.png'
}
};
In this tutorial, they set the size and offset for a single icon as follows:
var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
In my situation, I've got multiple icons and they are set in an object. How can I add the size and offset to var customIcons ?
Thank you.
According to this piece of Google Map API v3 documentation:
Note: Marker shadows were removed in version 3.14 of the Google Maps JavaScript API. Any
shadows specified programmatically will be ignored.
See: https://developers.google.com/maps/documentation/javascript/reference#MarkerImage
The shadow image is a MarkerImage object. As such, its constructor can take an anchor parameter (Point object) to tell how to position the shadow relative to your marker coordinates.
By default, the bottom-center point of MarkerImage is aligned on the marker coordinates. If your shadow image isn't the same size as your marker image (e. g. if it is wider) you will have to adjust the shadow's position.