We Keep Coding

Google Maps Default Icons

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;
}
}

Mapbox.js set map default zoom option

I have a mapbox.js map but the parameter zoom doesn't seem to be doing anything
and I can't figure it out in the documentation. whatever I set zoom to the zoom level always defaults to my project zoom level Here is the code:
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
$(document).ready(function() {
var map = L.mapbox.map('map', 'nhaines.hek4pklk', {
zoom: 1
});
// disable drag and zoom handlers
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
// disable tap handler, if present.
if (map.tap) map.tap.disable();
});

It took me a lot of digging around but I figured this out on my own. The dev's didn't respond yet. We were going about this all wrong. Here's what to do:
First, create the MapBox object, but set zoomAnimation to false. This question helped me realize that trying to setZoom while a CSS3 animation was in progress wouldn't ever work because it's tough to break out of. At least that's what I think is going on. Setting zoomAnimation to true allows the map to animate in and bypasses any custom zoom levels, so clearly this is very important.
var map = L.mapbox.map('map', 'username.map_id', {
zoomAnimation: false
});
Next, create a polygon layer and add to map from map's geojson. You find this within your MapBox projects > info tab. (In my case this geojson happens to contain the lat/lng coords of a polygon but your case may be different. featureLayer() should still add the geojson either way.)
var polygonLayer = L.mapbox.featureLayer().loadURL('http://your/maps/geojson').addTo(map);
After polygon layer (or whatever your lat/lng coords are of) has been added to map
polygonLayer.on('ready', function() {
// featureLayer.getBounds() returns the corners of the furthest-out markers,
// and map.fitBounds() makes sure that the map contains these.
map.fitBounds(polygonLayer.getBounds());
map.setView(map.getCenter(), 10);
}
Apparently fitBounds satisfies the map requirements to allow setView to be called on it, since now you can just call the map object directly to get the center lat/lng.
I haven't tested this in simple cases - I adapted this code from mine which checks if an address's lat/lng coords fall within a polygon while iterating over a series of MapBox maps. It should get you going though. Hope it helps!

Google maps zoom level migration v2 to v3

I'm migrating a piece of google maps code in javascript from v2 to v3
The following v2 piece shows a map with the center zoomed in, so you can see street names and specific details
var mapG = new GMap(document.getElementById("gmmap"));
var point = new GLatLng(52.6461049, 6.5583690);
mapG.centerAndZoom(point, 3);
I've tried migrating this to the following
var point = new google.maps.LatLng(52.6461049, 6.5583690);
var mapOptions = {
center: point,
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("gmmap"), mapOptions);
The map is centered at the exact same location but the zoom is way off. Is there a difference between the zoom values in v2 and v3? Or did I migrate it the wrong way?
If I change 3 to 15, the zooming is about equal. But since I'm migrating a client environment, I want it to look exactly the same

V2 documentation:
https://developers.google.com/maps/documentation/javascript/v2/introduction#LoadingMap
Each map also contains a zoom level, which defines the resolution of the current view. Zoom levels between 0 (the lowest zoom level, in which the entire world can be seen on one map) to 19 (the highest zoom level, down to individual buildings) are possible within the normal maps view. Zoom levels vary depending on where in the world you're looking, as data in some parts of the globe is more defined than in others. Zoom levels up to 20 are possible within satellite view.
V3 documentation:
https://developers.google.com/maps/documentation/javascript/tutorial#MapOptions
The initial resolution at which to display the map is set by the zoom property, where zoom 0 corresponds to a map of the Earth fully zoomed out, and higher zoom levels zoom in at a higher resolution.
and also https://developers.google.com/maps/documentation/javascript/maxzoom?hl=en
Most roadmap imagery is available from zoom levels 0 to 18, for example.
So they should be about the same. Could it be something else wrong with your code, e.g. are you doing fitBounds() anywhere or another method that could adjust the zoom level?

Wrapping latitude and longitude points with a 20m by 20m box (Google Maps API V3)

I am having a hard time trying to figure out how to wrap a Lat/Lng point with a rectangle that is 20meters by 20meters.
Use-case:
> Click on a marker on the Google map
< Infowindow opens
> Click a button called 'Wrap' on the Infowindow
< Automatically create a 20x20m box with the marker dead center
I have no issue creating the rectangle (square rather) on the map I just need to know how to compute the border of the square in Lat/Lng.
On a normal grid I would get the NW and SE points by:
marker_nw_y = marker_y + 10 (meters)
marker_nw_x = marker_x - 10
marker_se_y = marker_y - 10
marker_se_x = marker_x + 10
From there I could create the graphic square etc.. But with Lat/Lng it gets more complicated because changing the degree between two points is different depending on where you are.
How could I do this? Manipulating the Haversine formula? Instead of solving for 'distance' I would need to rearrange and solve for one of the coordinates, but rearranging that formula is difficult and im not sure whether my results are even right.

I believe this question includes code that should let you accomplish what you're looking for.

I would use Mike Williams' eshapes library which I ported to the Google Maps API v3 to make squares with a "radius" of 20*sqrt(2)/2 meters.
example using my port of Mike Williams' eshapes library
The click listener would be:
google.maps.event.addListener(map, "click", function(evt) {
var marker = new google.maps.Marker({ position: evt.latLng, map: map});
var square = google.maps.Polyline.RegularPoly(evt.latLng,20*Math.sqrt(2)/2,4,0,"#ff0000",1,1);
square.setMap(map);
});
working example
Simpler working example based off alternate answer in link from Kelvin Mackay

Calculating the bounding box using Javascript

I have a latitude/longitude value and distance value. I need to calculate a bounding box with the given location as the center. so if the distance was 200 meters then the rectangle box should be 200 meters in front, behind, to left and right.
How do I go about doing this using JavaScript?

You need to translate your coordinate lat/long to a x/y-value in the map projection you are using, then you can calculate your bounding box.
I don't know the Google Maps API well, and I don't know exactly what you want to do with your box. But maybe GBounds, GMercatorProjection and GLatLngBounds can be helpful. And if Google Maps API doesn't support calculations for the map projection you are using, then it can be helpful to use Proj4js. And maybe you want to read up about Map projections. Google Maps is by default using Mercator projection.

Here are a number of useful javascript functions for working with latitude and longitude:
http://www.movable-type.co.uk/scripts/latlong.html
For bounding box around a point, a simple modification using the above javascript library might be:
LatLon.prototype.boundingBox = function (distance)
{
return [
this.destinationPoint(-90, distance)._lon,
this.destinationPoint(180, distance)._lat,
this.destinationPoint(90, distance)._lon,
this.destinationPoint(0, distance)._lat,
];
}
(This uses the "Destination point given distance and bearing from start point" calculation.)

If you're using the V3 API, you can make use of Rectangle and Circle. See this blogger's brief description and examples:
http://apitricks.blogspot.com/2010/02/rectangle-and-circle-of-v3.html