Is there a way to access the colored markers with a letter from google?
I can only use the red ones with letters like
But I need green markers with a letter like I get it from the directions API from google. Like this one here
Is there a way to access to the colored markers with letter?
Or do I have to add the markers to my image folder?
You must use :
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|00FF00|000000
chld parameter is the letter you want to appear in your marker.
After the pipe, the first RGB code is the color of the marker, the second is the background color of the marker. The last one is optional.
So you can create your marker like this :
var myPin= new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|00FF00|000000");
and use it like you want !
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 set up a map with several markers.
I know it is possible to change the icon marker on click, and to change the icon marker on click on an external link. I would like to know if it is possible with the Google Maps API do to the following :
On clic on a marker, changing the icons of all other markers (in order to have the marker I clicked on be on highlight and the others fade) ?
On clic on an element, change the icon of all other markers (for exemple, clicking on "show event" would put the corresponding marker on highlight and the others would fade) ?
Thank you !
You need the collection of all the markers in an arrays ..
var myMarkers[]
Then preserve the marker you click doing a copy so you can iterate over this array of markers and change the icon for all the markers
myMarker[i].setIcon('my_new_icon.png');
and last preserve le marker icon
myCopiedMarker.setIcon(my_old_icon.png');
I need to draw some graphics over google maps. Graphics is not always transparent, so I'd like to draw text labels (country names, city names, etc.) over my graphics.
For graphics I use overlay map type , it is shown over base map. But I failed to draw labels over it?
I guessed that there shall be a way to draw base map twice, with different style settings (so I style map with not labels, put my overlay, and then put overlay with roadmap with labels only), but it does not seem like I can use basic map types as overlay ones. Another way I see is to manually get tile with labels only by composing URL. This works, but as far as I understand accessing map tiles directly is prohibited by ToS.
Is there a working and, well, legal way to do that?
Here is jsfiddle which illustrates URL composing solution: https://jsfiddle.net/GRaAL/jyr81p2c/
// here is how I get google maps tile with labels only
function getLabelsOnlyTile(coord, zoom) {
return "https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i" + zoom + "!2i" + (coord.x) + "!3i" + (coord.y) + "!4i512!2m3!1e0!2sm!3i353022921!3m14!2sen!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC52Om9mZixzLmU6bHxwLnY6b24!4e0";
}
I found that StyledMapType could be used as overlay map type (have same interfaces), so I created StyledMapType with labels only and instead of registering it in map type registry just added it as overlay, this way:
var onlyLabels = new google.maps.StyledMapType([...], {name: 'labels'});
//draw useful data over map
map.overlayMapTypes.insertAt(0, new UsefulDataOverlay());
//and then draw labels over it
map.overlayMapTypes.insertAt(1, onlyLabels);
Full working example is here: https://jsfiddle.net/GRaAL/jyr81p2c/2/
You might want to check MapLabel for Google Maps V3:
This library allows text to be added to the map at a particular location. Note that the user's browser must support Canvas for the label to be displayed.
MapLabel class
This class extends OverlayView.
Note that browser <canvas> support is required for the label to be displayed. Analytics
Source:
https://github.com/googlemaps/js-map-label
How to add text label in Google Map API
Hope this helps
Is there a way to change the default Google Maps direction line, the blue line that you are meant to follow, into a series of icons?
So instead of having a blue line showing the route on the map, I'd like to replace this with a series of small icons.
Or, if that isn't possible, can I place icons along the route in say 1km increments?
I see plenty of examples of replacing the start and end markers but not of the line.
Yes, it is possible. One option:
PolylineOptions to the DirectionsRenderer, you can also apply symbols to the Polyline
(example using a "dash" symbol)
or extract the route data and use it to put icons at all the vertices on the polyline (like the answer to this question, but with a transparent polyline)
example of a custom DirctionsRenderer
markers every 2km on a Polyline
markers at 2 arbitrary distances on a directions polyline
I have a map with a polyline and an animated symbol on the line. Just like the example that Google have here
https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate
Now I want to extract latitude and longitude of the animated symbol as it animates. I want to pan the map to the symbol so if the symbol is out of bound, the map automatically adjusts it self to show the animated symbol.
If there is any other work around to do this rather than getting the lat long points, do tell me.
I am not sure there is a latlng object available for the symbol.
By looking at the line object in the example you provided, it looks like only the offset attribute can be accessed.
However, you can compute the position of the symbol from this value:
Example: http://jsfiddle.net/ZPkMq/
If your polyline is not a straight line, finding the position of the symbol may be slightly more complex (but doable - see place marker on polyline with specific distance)
The thing is you can't get the LatLng point from the animated symbol. I just discarded using the symbol and started using marker to animate along a polyline. This gives a lot more options, and you can do almost anything.