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!
Related
I need to be able to put text within my polyline like the embedded Google Maps does as you can see from the below screenshot...
Now I have looked through the PolylineOptions API Reference and the Polyline but I can't see anything the points to achieving this. I really hope this is possible and I'm not going to have to hack something together.
Here is a Post Worth look at, Describing how to add labels to polylines:
http://duncan99.wordpress.com/2013/02/28/google-maps-api-polylines-and-events/
I commented yesterday asking if there might be any current way to add text within polylines. I know this question has been resolved, but the last activity I can see was in 2014.
I came across this library in github https://github.com/googlemaps/js-map-label
It allows a user to overlay text on the map with (see also examples folder):
var mapLabel = new MapLabel({
text: 'Route name',
position: pointCoordinate,
map: map,
fontSize: 12,
align: 'left',
});
Note, their source code within the "onAdd" method applies the pane to the map level, meaning the text would be underneath polylines. So, instead, I added it to the floatShadow pane by:
panes.floatShadow.appendChild(canvas);
Instead of:
panes.mapPane.appendChild(canvas);
I was able to make my map look like:
Adding text to polylines is not (currently) supported by the Google Maps Javascript API v3. You will need to create your own custom overlays to implement that. (I doubt you can make the text "follow" the polyline along a curve easily)
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 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.
I'm making a custom Google Map, using the official Styled Maps Wizard.
However, it doesn't seem to be possible to change the font-family of the labels (which is Arial).
Does anyone know if this is possible in Google Maps?
(EDIT: I now see the original question was about native Google Map labels, not custom Marker Labels. For my original response i.e. a custom font-family on Marker Labels, please read on...)
Fast forward to 2018...
If you call the Google Maps API, you can use a custom Google Font. Here is the documentation on font-family.
You‘ll need to specify the fontFamily option of the label option when creating a new google.maps.Marker. I used a font from Google Fonts, eg:
var marker = new google.maps.Marker({
position: posiiton,
map: map,
label: {
text: 'Label text',
fontFamily: "'Domine', serif",
}
});
The answer is: it can't be done. The best you can do is switch off all Google Maps labels, and use custom overlays.
Alternatively, make your own tiles using a service like Cloudmade or TileMill.
This question already has answers here:
Google Maps API 3 - Custom marker color for default (dot) marker
(18 answers)
Closed 11 days ago.
I won't use GIcon to change for the marker.Any other ways to change color of marker???
Nope, if you wan't to customize your marker, you will need to use GIcon.
You can find a whole lot of free markers at the Google Maps Icons Project. The code to use a custom marker is pretty straightforward:
// Create our "tiny" marker icon
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
// Set up our GMarkerOptions object
markerOptions = { icon:blueIcon };
// add the markerOptions as the second param to GMarker constructor
map.addOverlay(new GMarker(latlng, markerOptions));
The "Google map icons" website moved from http://code.google.com/p/google-maps-icons/ to http://mapicons.nicolasmollet.com
There you will find 600 markers and you even have a color picker to create the icons in the color you want.
It's very simple to change marker color or shape in your saved map. Simply click on the marker. when the box opens up, click on the marker again in the box. This gives you a drop down menu of colors and shapes. Good luck!