I'm developing an iPhone app in html5 and making the build with Phonegap.
In the app there's a Google map with custom markers, the way the marker icons are created is as follows:
var image = new google.maps.MarkerImage("hat.png", null, null, null, new google.maps.Size(20,30));
var shadow = new google.maps.MarkerImage("shadow.png", null, null, null, new google.maps.Size(20,30));
var marker = new google.maps.Marker({
map: map,
position: latlng,
index: markers.length,
icon: image,
shadow: shadow,
animation: google.maps.Animation.DROP,
html: htmlContent
});
The actual size of the icon's are double size compared to the sizes defined in the code. This is done to make sure the icons are shown in high res on the Retina display.
The code above worked fine until today, but what happens now is the following.
When the icons Drop down, using the google.maps.Animation.DROP, the icon is shown in high res on the way down, but when the icon "lands" on the map, the icon switches to a low res resolution version.
Has anyone ever experienced the same?
Thank you...
UPDATE
Found out that if I specify the Google map version like:
http://maps.googleapis.com/maps/api/js?v=3.0
So I guess it's a bug in the newest Goolge map API.
I found my solution to this by using scaledSize instead of size to define the width and height of the image.
I just found this problem too. The bug appears to be in latest (v3.7) of their API, so if you specify v3.6 via the URL parameter ?v=3.6 it'll work fine.
Update: In version 3.8+ (I think) you can use optimized: false to force a retina image, if you are using one. This is because optimized: true takes all your sprites and weaves them together into a master sprite. This means you should only do this if you have very few markers. Also, doesn't work too well with Clusterer.
The default is now optimized: true, which will determine first if the device can even handle rendering so many high-res icons before creating a master sprite at a higher resolution. For example, load a map with a lot of markers on a retina Macbook Pro, and they'll appear high-res, but try an iPhone 4 and it will not. If you force the iPhone 4 using optimized: false, and have a lot of markers, it might stutter a lot. Not sure about the 4S but I assume it'll probably use the higher res version as it has a lot better processing capability.
Simply use an object with url, size, and scaledSize attributes:
var icon = {
url: 'path/img/marker#2x.png',
size: new google.maps.Size(30, 40),
scaledSize: new google.maps.Size(30, 40)
};
Where path/img/marker#2x.png is a 60px x 80px PNG.
If you encounter any switching of icons to lower resolution, it's because the maps api uses canvas to render the icons (grouping them and whatnot?) for a faster user experience apparently. So it isn't technically a bug, but it does cause buggy things to happen in certain browsers (like older ie)
But there is a setting you can use to turn off in MarkerOptions using optimized: false
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: image,
shadow: shadow,
optimized: false
});
Scaled Size property is the correct one to use as referenced by Google here: https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon
Related
See this map: http://imgur.com/a/r03rk
Is it possible to stop Google Maps from slanting the image like this?
If so, how?
Maybe disabling webGL would help? However, I dont think I can do this in code so it would affect all users, instead my own browser only.
Thanks.
Looking at https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map , the tilt option can be set to 0 so that the map will no longer automatically tilt (slant) when the user zooms in.
For example:
var mapOptions = {
center: mycenter,
zoom: 7,
tilt: 0
};
Unfortunately the icon to switch tilt back on (slanting the image) will still be available on the map for the user to switch on if they wish. There is no simple way to stop this icon appearing.
I want to create a google map marker which has an animating gif.I know google maps has 2 animation drop and bounce.I want to create one except those.Is is possible to do this. Could you lead a way?
Thanks in advance.
Per docs, in google.maps.MarkerOptions you can pass optimized: false if you want to use gif as marker icon:
optimized Type: boolean
Optimization renders many markers as a single
static element. Optimized rendering is enabled by default. Disable
optimized rendering for animated GIFs or PNGs, or when each marker
must be rendered as a separate DOM element (advanced usage only).
var marker = new google.maps.Marker(
{
position: myLatLng,
map: map,
optimized: false,
icon: "http://preloaders.net/preloaders/489/Classic%20map%20marker-32.gif"
});
JS fiddle: http://jsfiddle.net/T78Hd/138/
I wonder if it's possible to change Google Maps' default marker graphic to a custom animated sequence (.gif or .swf) to achieve the same effect as Apple Maps does when showing current location via GPS:
Probably it can be done with javascript & custom overlays, but I think it won't be as smooth as Apple Maps animation. (damn js!)
As a standard, the markers use something called optimized rendering that always renders the markers as static. To see animated gifs you need to set optimized = false on your marker. The code for generating your marker would then be:
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: youricon,
optimized: false
});
And for icon similar to the one of apple Maps, you will need to have a similar gif icon.
This should solve your problem.
Ok I have searched high and low for a solution to this. Everything I have found is not quite working. This is a similar problem to the Google maps not appearing in a hidden div using jquery tabs. However I have the map loading correctly staying loaded and holding the zoom when when navigating to another tab and back in Chrome, Firefox, Opera and Safari.
So my problem as usual is IE.
The way I have set it up is to hide the div initially and then to display it and load in an iframe with the map code in it. As I say it works fine on all but IE where it loads the map in the left hand corner with no resize ability. I'm assuming this is down to the way IE deals with processing javascript. I've tried loads of suggestions on here but all fail in IE so wonder if anyone has come across this before and if any workaround is available.
The code below is to initialise the map. The call to the function is the last thing in page after the closing html tag.
This page is then loaded into a div tag via an iframe when a ui.tab is pressed to change the div panel displayed.
Any clues or tips would be most welcome.
function initialize() {
var myLatlng = new google.maps.LatLng(50.66416319854267,-1.1316803097724914);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
draggable: false,
position: myLatlng,
map: map,
icon: '../images/yellow-pin.png',
title: ""
});
google.maps.event.trigger(map, 'resize'); // added from another forum post does not work
}
That is the typical hidden "top left corner" issue.
Have you tried using an onload function to run the initialize function?
The problem is that the javascript code (the trigger "resize") in the iframe is being executed when the page is loaded, not when it is displayed. When it is loaded the div has zero size. You need to trigger the resize function on the map after the div is diplayed and has a size.
I need to display markers on my map and it's working well. The only problem is that they appear to be too small. How can I make sure that the markers used are large in size and can be visible from almost any zoom state?
For making the icons bigger I would definitely recommend to make your icon images larger. To for example fix pixely icons on high-dpi mobile device using downscaled hi-res icons use following code:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
map: map,
icon: {
url: "img/img.png",
scaledSize: new google.maps.Size(32, 32) // pixels
}
});
Tested with Google Maps API JavaScript v3.13
If your using version 3 of the api-
When you create the marker, in the marker options you can specify the icon like this:
icon: new google.maps.MarkerImage(
url:string, size?:Size,
origin?:Point, anchor?:Point, scaledSize?:Size
)
Set size to the actual size of your icon image.
Set scaledSize to whatever size you want to stretch the image to.
It is better of cause to make an icon image the size you want instead of scaling it.