I show on a Google map (V3) markers. So that the icons be loaded faster, all the icons are stored in one sprite.
I notice that the icons are sometimes cropped (at the bottom or / and on the right edge is missing a 1 pixel wide border). Interestingly, you can zoom the map, and then the problem disappears. Is this a Google bug or am I doing something wrong. The problem occurs with Firefox, Chrome and IE.
Has anyone had a similar experience or a solution for the problem?
I made a reduced example of the problem. This example can also be accessed online:
http://www.gps-tracks.com/MarkerIconSpriteProblem.aspx
var markerIcon = new google.maps.MarkerImage(
"pictures/NetzCats/C03-MapSpritesS03.png",
new google.maps.Size(20, 16),
new google.maps.Point(140, 1600),
new google.maps.Point(10, 8)
//new google.maps.Size(20, 16)
);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
icon: markerIcon
});
You're using v3.10
http://jsfiddle.net/skdz6/
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"
With version 3.9 everything is OK http://jsfiddle.net/skdz6/1/
src="https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"
Someone who knows to get it working in v3.10?
since version 3.11 of the google maps API, the Icon object replaces MarkerImage. Icon supports the same parameters as MarkerImage.
The properties of the marker are a bit more clearly defined since version. For me this worked much better.
An example could look like this:
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)
};
for further information check this site: https://developers.google.com/maps/documentation/javascript/markers
You are scaling your icon down to half its size, so it will inevitably lose either one border or the other, and you're exchanging Size and Point, as well as the order of the properties.
Try this instead:
var markerIcon = new google.maps.MarkerImage(
new google.maps.Point(5, 8), // anchor (POINT)
new google.maps.Point(140, 1600),//<====== origin (POINT)
new google.maps.Size(10, 8), //<======scaledSize (SIZE)
new google.maps.Size(20, 16), //<====== Size (SIZE)
"pictures/NetzCats/C03-MapSpritesS03.png" //URL
);
Documentation here.
Related
I was just wondering what the maximum recommended dimensions are for a google maps marker.
I have an icon of 44x64
And, in order to comply with retina screens I downscale it to 22x32.
marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
map: map,
icon: {
url: 'http://path/to/marker.png',
scaledSize : new google.maps.Size(22, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(11, 32)
}
});
This works great. But, my question is really simple: what is the maximum size allowed for the google maps marker? Can't find it anywhere in the documentation.
Icons (markers) may be up to 4096 pixels maximum size (64x64 for square images).
as stated here
https://developers.google.com/maps/documentation/static-maps/intro#CustomIcons
So I noticed in the older version of the API there was a maxZoomLevel under nokia.maps.map.Display. However I can not find anything similar to this in the JS API 3.0.
Currently I am using
map.addEventListener('mapviewchange', function () {
var zoom=map.getZoom();
if(zoom<=maxZoom) {
map.setZoom(maxZoom)
}
});
But once it hits the maxZoom and you zoom out more it is very choppy since it zooms out a bit then I set it back to maxZoom. Is there any better way of doing this?
You can set the max zoom for the layer, something like follow should work
var defaultLayers = platform.createDefaultLayers();
defaultLayers.normal.map.setMax(12);
var map = new H.Map(mapContainer,
defaultLayers.normal.map,{
center: {lat:39.2328, lng:9.01168},
});
Just a small addition on the accepted answer, if anyone is trying to use a vector layer, as provided in the here maps examples, then you just need to select the vector object, as done below:
var defaultLayers = platform.createDefaultLayers();
defaultLayers.vector.normal.map.setMax(19); // this will set the max zoom level, so the user won't able to zoom deeper than 19 (close to buildings level)
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map,
{
center: currentAddress,
zoom: 18 // this is the default zoom level
});
My Google map uses a custom Marker pin loaded from a sprite sheet, everything works as expected for 1x, 2x, and 3x displays expect #2x, and #3x the image shows up as twice of three times the size of the original image.
If I try and scale it back to to the 1x dimensions when displaying at #2x and #3x the marker shows up without the image.
Googleing around suggests that I am doing everything right, Icon configuration is based on the documentation.
Is anyone able to spot what might be wrong with my scaledImage configuration?
if(devicePixelRatio > 1) {
pinImage['scaledSize'] = new google.maps.Size(15, 36);
}
Code extract from JavaScript:
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Retina support
var requireImagePrefix = "";
var devicePixelRatio = (window.devicePixelRatio===undefined?1:window.devicePixelRatio);
if(devicePixelRatio == 2) {
requireImagePrefix = "#2x";
}
else if(devicePixelRatio == 3) {
requireImagePrefix = "#3x";
}
// Image for the marker
var pinImage = {
url: "/assets/sprite" + requireImagePrefix + ".png",
size: new google.maps.Size(15*devicePixelRatio, 36*devicePixelRatio),
origin: new google.maps.Point(430*devicePixelRatio, 20*devicePixelRatio),
};
if(devicePixelRatio > 1) {
pinImage['scaledSize'] = new google.maps.Size(15, 36);
}
var officeMarker = new google.maps.Marker({
position: hqLocation,
map: map,
title: "Anomaly HQ",
icon: pinImage,
optimized: false
});
Thanks very much for your time.
My error in the above are:
The scaledSize parameter is meant to be the dimensions of the 1x sprite
We don't need to multiply the size and origin parameters by the aspect ratio
I have posted the updated solution as a Git oh Github
I draw a polyline to a google maps, and put markers to every point of it. I want to hide these markers higher zoom levels, therefore I use the Marker Manager. It's works well.
After draw everything, the map zoom to the bound of the polyline with the google.map.fitBound command. But if it zoom to far, where the markers would be hided, they don't. They still visible. If I drag or zoom again, they are hiding.
I use the markermanager in the simple way:
var aMarkers [...array of markers...],
markerMgr = new MarkerManager(map);
google.maps.event.addListener(markerMgr, 'loaded', function() {
markerMgr.addMarkers(aMarkers[0], 15, 0);
markerMgr.addMarkers(aMarkers[1], 12, 0);
markerMgr.addMarkers(aMarkers[2], 10, 0);
markerMgr.refresh();
});
Is anybody met this problem before? Thank is advance!
I had this same problem. When creating your markers, don't set the "map" parameter in the marker options. The MarkerManager will add the markers to your map as you zoom in and out.
For example:
var newMarker = new google.maps.Marker({
//map: map
position: markerPosition,
icon: icon
});
mgr.addMarker( newMarker, 9 );
Why do you have the maximum zoom for the markers set to 0?
MarkerManager.addMarkers(aMarkers[0], minZoom, maxZoom(optional))
Try (that parameter is optional per the documentation):
var aMarkers [...array of markers...],
markerMgr = new MarkerManager(map);
google.maps.event.addListener(markerMgr, 'loaded', function() {
markerMgr.addMarker(aMarkers[0], 15);
markerMgr.addMarker(aMarkers[1], 12);
markerMgr.addMarker(aMarkers[2], 10);
markerMgr.refresh();
});
Working Example
Here's the basic code, I cut it straight out:
var loadposition = new google.maps.LatLng(<?=$feed['location'][0]?>,<?=$feed['location'][1]?>);
var markerSize = new google.maps.Size(20,34);
var houseMarker = new google.maps.MarkerImage("marker2.png",markerSize);
var markerShadowSize = new google.maps.Size(30,34);
var markerShadowPoint = new google.maps.Point(30,0);
var markerShadowAnchor = new google.maps.Point(0,35);
var houseMarkerShadow = new google.maps.MarkerImage("marker2.png",markerShadowSize,markerShadowPoint,markerShadowAnchor);
marker = new google.maps.Marker({
position:loadposition,
title:"<?=$feed['name']?>",
draggable:false,
clickable:true,
icon:houseMarker,
shadow:houseMarkerShadow
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function(e){
var loadposition = new google.maps.LatLng(<?=$feed['location'][0]?>,<?=$feed['location'][1]?>);
var htmlContent = "<?=$feed['name']?><br/><?=$feed['address']?>";
infowindow.setPosition( loadposition );
infowindow.setContent(htmlContent);
infowindow.open(map);
});
For some reason, the shadow does not show. However, If I enable drag and drop and/or set up a marker animation (either bounce or drop) the shadow shows up once it's lifted up.. But as soon as the marker lays down the shadow disappears.
I can not find any other documentation on this nor similar questions / answers.
Thanks
The shadow image needs to be different than the marker image.
For example the marker shadow for google maps is like this;
http://maps.gstatic.com/mapfiles/shadow50.png
From your code;
var houseMarkerShadow = new google.maps.MarkerImage("marker2.png",markerShadowSize,markerShadowPoint,markerShadowAnchor);
Having the same image marker2.png as both the marker and the shadow probably isn't going to work as you expect.
It turns out that the syntax is correct. It's actually a bug with Google Chrome and Safari. Internet explorer and Firefox all render the shadow correctly.
The bug is opened at http://code.google.com/p/gmaps-api-issues/issues/detail?id=3993