I am new to JS and Google Maps API...I acquired some JS code to hopefully display a WMS that I created in Google Maps Engine.
I have got stuck with the below code as the WMS seems to not display anything.
Where I get lost is the baseURL for the Google Maps Engine WMS and the 'layers' variable which I used the Asset ID for this particular map. I'm quite lost here and would appreciate any help.
function WMSGetTileUrl1(tile, zoom) {
var projection = window.mapA.getProjection();
var zpow = Math.pow(2, zoom);
var ul = new google.maps.Point(tile.x * 256.0 / zpow, (tile.y + 1) * 256.0 / zpow);
var lr = new google.maps.Point((tile.x + 1) * 256.0 / zpow, (tile.y) * 256.0 / zpow);
var ulw = projection.fromPointToLatLng(ul);
var lrw = projection.fromPointToLatLng(lr);
//The user will enter the address to the public WMS layer here. The data must be in WGS84
var baseURL = "https://mapsengine.google.com/17306057122701807517-17234028967417318364-4/wms/?";
var version = "1.1.1";
var request = "GetMap";
var format = "image/jpeg"; //type of image returned or image/jpeg
//The layer ID. Can be found when using the layers properties tool in ArcMap
var layers = "17306057122701807517-17234028967417318364";
var srs = "EPSG:4326"; //projection to display. This is the projection of google map. Don't change unless you know what you are doing.
var bbox = ulw.lng() + "," + ulw.lat() + "," + lrw.lng() + "," + lrw.lat();
//the size of the tile, must be 256x256
var width = "256";
var height = "256";
var styles = "default";
//Establish the baseURL.
var url = baseURL + "version=" + version + "&request=" + request + "&Layers=" + layers + "&Styles=" + styles + "&SRS=" + srs + "&BBOX=" + bbox + "&width=" + width + "&height=" + height + "&format=" + format;
return url;
}
You've got 2 problems with your code. The first is obvious. You're using your map ID as your layer ID. They're two separate things. In GME, go in to the layer detail screen and click "Access Links" and pick up the layer ID. It'll start with 17306057122701807517- but the second half will be different. Also, don't forget to append -4 to the end. This indicates it's a published layer as opposed to one in preview. Tip: If you make it -2 you can see the preview version e.g. the updated but unpublished one.
Now for your second problem which is way more subtle. The EPSG code used in the above example is 4326 which is WGS84 while Google Maps are published in Google Web Mercator which is EPSG:900913. You can't just swap out the EPSG code as the coordinate system used is different. This really means that unless you rewrite the code to generate the bounding box then you can't use that javascript.
What I'd recommend is using the code from http://www.sigacts.com/html5/google-maps-api-with-wms-overlay/ which uses the correct coordinate system. The example actually uses a MapsEngine map as well. Just download the code and modify vars.js to suit and you're away. I've downloaded and validated that it works with my own map as well so you should have no problems. Hint: The code is a little old and references earthbuilder.google.com which is the old name for MapsEngine. Make sure you change both the domain name and the Map ID.
EDIT: WMS is a clunky way of getting content on to the Map. You should be looking to use MapsEngineLayer which is part of the Google Maps API or for more fine-grained things you can use the Maps Engine API which allows you to do attribute filtering, spatial queries etc.