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.
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!
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've googled, looked through S.O., and even just ran through the javascript properties using firebug, but I just can't find a way to get the maxIntensity property in a google heatmap. I can set maxIntensity, when instantiating the new map.
According to the docs here: https://developers.google.com/maps/documentation/javascript/3.10/reference#HeatmapLayer
there's no method for getting to the heatmap options object either, just setting as well.
Any ideas?
You can get it, assuming heatmap is the heatmap layer:
heatmap.get('maxIntensity')
First, would suggest taking a look at the Google Maps Documentationj. The provided solution seems correct, you can double check with the
heatmap section.
let heatmap = new google.maps.visualization.HeatmapLayer({
data: locations,
map: map,
maxIntensity: maxI,
radius: rad,
opacity: opac
});
I have many different KML layers on a Google Map (v3). Random colors of markers were assigned to each set of markers. I would like to be able to control this, however.
So far, this is what I have:
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var kmlLayerOptions = { preserveViewport: true, suppressInfoWindows: true };
var Layer1 = new google.maps.KmlLayer('http://myurl.com/1.xml', kmlLayerOptions);
Layer1.setMap(map);
var Layer2 = new google.maps.KmlLayer('http://myurl.com/2.xml', kmlLayerOptions);
Layer2.setMap(map);
I need to be able to say I want Layer 1 to use blue markers and layer 2 to use red markers, but I can't seem to figure this out.
From what I can tell, there is no way to do this with the kmlLayerOptions, which is where it would seem like it would happen, so I don't see where else I could logically make this change other than directly on the layer object.
You can't change it with KmlLayer (at least currently, you could create an Enhancement request to add the functionality).
You can do it with FusionTablesLayers (import your KML into FusionTables, then use either the User Interface to set the icons or dynamic styling in the Google Maps API v3 (assuming you need less than 5 different icons, and the ones you want are available in FusionTables).
A final option would be to edit the existing KML to use the icons you want.
The KmlLayer renders according to the styling in the KML document itself, and you cannot override this in any layer options.
If you don't want to modify the KML itself, you could use a third party library such as http://code.google.com/p/geoxml3/ to render the KML on the clientside rather than having Google's servers render it, and this would give you the ability to override the rendering defaults.