I am trying to get the current default Google Maps Icons.
I am making a program with the Google Maps API and have set my DirectionsRenderer to suppress markers so I can make markers to set the specific icon.
This is my current result:
This is what I had before suppressing the default markers:
Later in my program I will be adding waypoints so I would like to set markers like the ones above with the letter A, B, C, etc. with a different color, (like marker "A", which is green).
I have visited several sites such as:
https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-predefined
https://www.google.com/fusiontables/DataSource?dsrcid=308519#map:id=3
google maps v3 standard icon/shadow names (equiv. of G_DEFAULT_ICON in v2)
The markers these websites tell you to use, do not look the same as the current markers. I am wondering if there is a way to call the current "green marker a" just like in the fusion tables:
If so, how? Thanks!
When you take a look at the network-tab of the developer-tools you'll see that the URL for the green marker is:
https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&text=A&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1
//------------------------------------------------------------------------------------^
The letter may be defined via the text-parameter
(Note: there is also a color-parameter, this parameter is used for the text-color and not for the background of the marker)
This post was old. I hope my answer that will help people to do that.
for (var i = 0; i < listMarkers.length; i++) { //loop markers
if (listMarkers[i].icon) { // if icon is set
listMarkers[i].setIcon(); //set default
break;
}
}
Related
If I go to:
https://www.google.com/maps/#36.9644841,-122.0149787,37m/data=!3m1!1e3?hl=en-US
Please note the 37m parameter after the latitude, longitude. Now if I modify it to 20m (I guess it means meters) like this:
https://www.google.com/maps/#36.9644841,-122.0149787,20m/data=!3m1!1e3?hl=en-US
now I get an even closer zoom of that location. I guess it's the height from which the user sees that location...
What is the corresponding parameter of this in Google Maps Javascript API?
Thanks
Google earth API's are already deprecated and will continue to work for next few days.
So we are left with Google Maps API only. So I will answer according to that only.
What you are trying to do can be achieved by zoom level in google maps, for example
var gMap = new google.maps.Map(
document.getElementById('map-canvas'),
{ zoom : 14 } //Setting default zoom level
);
//To set map to next zoom level
gMap.setZoom(12);
Check this for more details
https://developers.google.com/maps/documentation/javascript/3.exp/reference
I'm trying to use jvectormap to create a map of the US with markers. I want these markers to either be red or blue and I would like to specify which color goes to which marker manually (not using any sort of scale or overly complicated data visualization function). Is there a way to do this? The new jvectormap's API is way too abstract for me to easily implement this.
I've tried using the old jvectormap but it appears it is buggy and doesn't show the markers in the correct locations.
Here is an example of two different types of markers based on a third element in the list of markers called type. I essentially created another array called colors used for the values in the data series representation. The loop right before the map is created iterates through the list of markers and pulls out the type and decides what the color value should be based on the type.
for (var i = 0; i < markers.length; i++) {
if (markers[i].type == 'call-center') {
colors[i] = 0;
}
else {
colors[i] = 1;
};
};
Similar setups can be achieved for different types if you add additional if statements.
Is there any way to create custom dynamic icons for the markers?
What I want to create is a list of points and put a number "n" within markers specifying it's the n-th element.
Yes. You can either use custom icons with Numeric Markers or the built-in numbering system on Google has for markers.
Assuming the last option (not using custom markers), your marker definition code would look like:
var NUMBER_SHOWN='34';
var ICON_COLOR = 'ff6600';
var ICON_TEXT_COLOR = '000000';
var marker = new google.maps.Marker({
position: [LatLong Obj],
map: [Map Obj],
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+NUMBER_SHOWN+'|'+ICON_COLOR+'|'+ICON_TEXT_COLOR
});
I believe this only works for two-digit number, though I'm not sure.
EDIT
Geocodezip has correctly pointed out that the second approach has now been deprecated, so it looks like you're stuck using the first approach (using google's custom numbered-icons). Have a look at Daniel Vassallo's answer here on how to use it. If none of the markers fit your needs (colors, look, etc) you can create your own custom markers for each of the numbers (if you know how, you can write a server-side script that you can pass GET vars to and have it build the icon for you using GD etc, but you can also just build all the icons by hand)
I discovered that is possible to add only eight waypoints in google api directions, you know how to bypass this limitation? I've tried to display direction api, but gave up this idea. Now my solution is based on own polyline, each click adds marker that should stick to that line, next together with it should move as you drag and here occurred is that if there are more than 8 points polyline with markers is no longer compatible. Maybe my approach is completly bad? How to fix this?
Current code: jsfiddle
Markers are not on the polyline:
One way to avoid markers being placed in the middle of the block is to place one at the end of the generated polyline, for example, inside one of your loops, instead of where the click was.
for (k = 0; k < next.length; k++) {
polyline.getPath().push(next[k]);
if (z == steps.length-1 && k == next.length-1) {
var roadMarker = new google.maps.Marker( {
map: map,
position: next[k],
icon: "http://labs.google.com/ridefinder/images/mm_20_green.png"
});
}
}
You will have to also change the first marker to be placed at the start of the polyline
This applies the code above http://jsfiddle.net/T79as/3/
So, my solution is to create render DirectionRenderner between each important waypoint (with marker?):
http://jsfiddle.net/9T7Vg/
draggable markers that look exactly like original ones
draggable polyline with immediately calculation
custom markers with letters (A, B, etc.) - this was difficult
route computation in long distance is much faster
route can have more than 8 waypoints (you can improve script to automate split the route when user want to place 9th waypoint between markers)
So this solution is in fact better than original in Google Maps, especially with long routes.
Is there any way to remove the markers that the directions put on the map? I have 4 locations that show on the map. A green arrow where the user is and 3 locations marked A, B, C. If I click on one it routes between the user's location and the marker. The problem is that google adds a new A & B marker to the map as the start and end of the directions. Now I have a couple A and B markers on the map and it's pretty confusing.
Thanks
In the DirectionsRendererOptions set suppressMarkers to true
This is an old post, but I ran on the same issue. I have map with my own markers, I would select few of them and starting point, then I would show directions with markers A, B, C... The problem was how to remove directions and show my markers again.
Here is what worked for me to remove direction paths with markers (A, B, C, etc..).
directionsDisplay.setMap(null);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
RefreshMarkers(); //your function to draw your markers
directionDisplay is declared globally. It's API v3.
Not sure if this is helpful or not. When you create a new GDirection and supply it with a map object, it will automatically draw the polyline to the map as soon as the direction is loaded. This also automatically adds the markers at the start and end of the journey.
I've noticed, however, that if you don't supply the map object initially and instead use the the 'load' event listener to manually add the polyline to the map, you get the line but not the markers.
//Don't supply a map to GDirections()
var direction = new GDirections();
//Make sure {getPolyline:true} is given to the load function
direction.load("here to there", {getPolyline:true});
GEvent.addListener(direction,
"load",
function(){ map.addOverlay(direction.getPolyline()); }
);
This might be easier than finding and removing the markers, especially if you're using the 'load' event listener anyway.
For each marker you want to remove, do
marker.setMap(null);
http://code.google.com/apis/maps/documentation/v3/overlays.html#Markers
Hit menu then layers and on the lower left press clear map. That should clear out everything on the map.
Normally you'd be able to simply do marker.setMap(null), but because the Directions call automatically places the A & B markers on the map, you do not have direct access to them and therefore cannot remove them in this way.