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.
Related
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!
In google map api, I styled the features and colors differently for water and landscape. I bound an old transparent paper image as an overlay on the top of the google map api, but for nokia here map api, I could not find anything like that to do the same things. I only found to add an image bound to a specific geo.BoundingBox area using the ImageProvider class, but this is not what I want. I want the things that I did for google also something similar for Nokia Here map API (if possible for the latest version 3.0 would be best). #Jason Fox
I don't think you need a ground overlay for that... I didn't try your code but just reading it, I get that everytime the map goes idle (doesn't move/zoom anymore) you want a transparent png to fill the entire screen right?
In that case, why go through the geo-reality at all? After the map stops your png must fill the screen, no matter where in the world you are. So the geo-bounds of the map are completely irrelevant to the problem.
Instead just append an HTML image to the map's viewport element.
var map; //your Map instance
var image = new Image("css/map-filter-mask.png");
var viewport = map.getViewPort().element;
image.style.width = "100%";
image.style.height = "100%";
map.getViewPort().element.appendChild(image);
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).
In Google Map API v3, as the title, I only saw 2 types of animation in google map api, but I saw in some places the map marker animate like grow big when mouse over it? How to implement this?
Use marker's mouseover event handler and setIcon() method. You can use dynamic icons from google chart api for this purpose, and change the chld attribute to make the icon grow:
http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.5|0|FF8800|15|_|
http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.6|0|FF8800|15|_|
http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.7|0|FF8800|15|_|
Don't forget to set proper anchor point! For example:
marker.setIcon(new google.maps.MarkerImage(
'http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.65|0|FF8800|15|_|',
null,
null,
new google.maps.Point(11, 43) // this is the proper anchor point for scale 0.65
));
You could use your own image as a marker, then make use of the scaledSize property for the marker image to make it bigger when the mouseover event fires.
I don't know of a way to do this without doing some more complicated stuff like this.
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.