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.
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 am fairly new to Google Maps- how do I make a google maps AirBnB type marker? I am setting my markers fine, I just need to be able to create a rectangle with a background with text in it like the picture...
I have a "price" variable I can set as well.
Here's my code:
var marker = new google.maps.Marker({
position : latlng,
map : map,
label: {
text: price, // $100,000
color: 'white'
}
});
A marker Label is typically a letter or number that appears in the marker. You can put more than one letter or number, but the marker won't resize automatically to fit the text. One possible solution would be using an infowindow to display the information you want. There is some good documentation on infowindows here:
https://developers.google.com/maps/documentation/javascript/infowindows
Another alternative would be to use custom markers:
https://developers.google.com/maps/documentation/javascript/custom-markers
Google allows you to use custom markers instead of the default ones, you can follow the instructions for simple marker icons here:
https://developers.google.com/maps/documentation/javascript/markers#simple_icons
The only drawback with the custom icons is if you are listing price information like in the image you posted, you will need a custom icon for each price.
I hope this helps!
I am trying to decide if the Google Maps API is the right tool to use for me.
I have a list of places I'd like to display on a map (a map of Italy)
and I'd like that:
The map doesn't show any other label but mines, and
My places are shown as labels on the map, without any icon/pin
I saw (e.g. Changing markers icons in Google Maps application) that you can change the pin icons, but I'd like not to have any.
Style the map to remove all other labels - I like using this wizard. Note the 'More Options' link in the bottom left gives many more customization options.
To create markers with only labels, not pins, you'll need a transparent PNG to use for the marker icon. I used a 20x20 one. Tweak the icon anchor to move the label to the right spot, I found 7,7 to be reasonable. For more about custom icons, see the docs.
var marker = new google.maps.Marker({
position: markerPosition,
map: map,
icon: {
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(7, 7),
url: transparentIconURL
},
label: '1'
});
You can use a styled map with the Google Maps API v3 (or a completely custom map with your own tiles)
If you just want text labels for your places, look at the InfoBox library (this example).
I have a map with custom marker images. The image I'm using is semi transparent. When I display it in the map only a small triangle show in the bottom right of where is icon should be.
Can semitransparent images be used as imagemarkers in google maps?
Yes transparent images can be used as custom marker images. It's good practice to specify the size of the image when creating the image object e.g.
var customMarkerImage = new google.maps.MarkerImage('image.png', new google.maps.Size(20, 20), null, new google.maps.Point(10, 10));
This may also resolve your problem with the image partially displaying.
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