Android Google Static Maps clickable marker

[Appsurd]

Dear fellow game makers,

Technical details:
GM:Studio v1.4.1763 Professional + Android
Developer page Static Maps: https://developers.google.com/maps/documentation/static-maps/

I got a slightly difficult problem which I can't find out. I want to show a map in-game of a google static map, and this is working like a charm. I can also add a marker (so a location of a certain place) to the map and that's working out fine too. Please have a look at the picture generated in-game by the Google Static Maps. This is a map of the city centre of Delft, where the station and on the far left the park are marked with a marker.


Now I want to be able to click on a marker and open up a popup menu with some information about the location. Since I'm using Google Static Maps (and no other Google Maps extension is available for GMS), I cannot click on them since it's an image. So I want to reconstruct the (x,y) coordinates out of the known (latitude,longitude) coordinates of the markers.

METHOD 1:

Since I had no idea where to start, I looked on the internet and found the following page on Stackoverflow: http://stackoverflow.com/questions/12507274/how-to-get-bounds-of-a-google-static-map in which the (latitude,longitude) of the corners of the map were calculated. Since I couldn't find any better ideas, I decided to implement this in GameMaker:Studio.

This didn't work as I would like it to, since the coordinates calculated by the script are not fully correct, see the screenshot from my game below.


Here I coloured the left top and right bottom corner green, and calculated based on the current zoom and the latitude/longitude of the center where the corner should be based on the scripts on Stackoverflow. In case you want to see my scripts, see the spoiler below.

Spoiler

///map_get_corners(centerlat, centerlong, zoom)
//
// Script:      Finds all latitudes/longitudes of all corners of a given center
//              and zoom
// Date:        2017-04-04
// Taken from:  http://stackoverflow.com/questions/12507274/how-to-get-bounds-
//              of-a-google-static-map
//
// Arguments:
// argument0:   Latitude coordinate of the center
// argument1:   Longitude coordinate of the center
// argument2:   Zoom size

var centerlat = argument0;
var centerlong = argument1;
var center;
center[0] = centerlat;
center[1] = centerlong;
var zoom = argument2;
var scale = power(2,zoom);

var a = map_size(1);
var width = a[0];
var height = a[1];

// Duplicating the Python script
var MERCATOR_RANGE = 320;
var pixelsorigin;
pixelsorigin[0] = MERCATOR_RANGE / 2;
pixelsorigin[1] = MERCATOR_RANGE / 2;
var pixelsperlondegree = MERCATOR_RANGE / 360;
var pixelsperlonradian = MERCATOR_RANGE / (2*pi);

centerPx = map_get_corners_fromLatLngToPoint(center, pixelsorigin, pixelsperlondegree, pixelsperlonradian);

var NWpoint;
NWpoint[0] = centerPx[0]-width/2/scale;
NWpoint[1] = centerPx[1]-height/2/scale;

NWLatLon = map_get_corners_fromPointToLatLng(NWpoint, pixelsorigin, pixelsperlondegree, pixelsperlonradian);

var SEpoint;
SEpoint[0] = centerPx[0]+width/2/scale;
SEpoint[1] = centerPx[1]+height/2/scale;

SELatLon = map_get_corners_fromPointToLatLng(SEpoint, pixelsorigin, pixelsperlondegree, pixelsperlonradian);

var a;
a[0] = NWLatLon[0]; // north
a[1] = NWLatLon[1]; // west
a[2] = SELatLon[0]; // south
a[3] = SELatLon[1]; // east

return a;

///map_get_corners_fromLatLngToPoint(LatLng, pixelsorigin, pixelsperlongdegree, pixelsperlongradian, [opt_point])
//
// Script:  Used for corners
// Date:    2017-04-04

if argument_count == 5
{
    var point = argument[4];
}
else
{
    var point;
    point[0] = 0;
    point[1] = 0;
}

var origin = argument1;

point[0] = origin[0] + argument0[1]*argument2;
var siny = clamp(sin(degtorad(argument0[0])), -0.9999, 0.9999);
point[1] = origin[1] + 0.5*ln((1+siny)/(1-siny))*-argument3;

return point;

///map_get_corners_fromPointToLatLng(point, pixelsorigin, pixelsperlongdegree, pixelsperlongradian)
//
// Script:  Used for corners
// Date:    2017-04-04

var point = argument0;
var origin = argument1;

var lng = (point[0] - origin[0]) / argument2;
var latRadians = (point[1] - origin[1]) / -argument3;
var lat = radtodeg(2*arctan(exp(latRadians)) - pi / 2);

var a;
a[0] = lat;
a[1] = lng;
return a;

Upon going to Google Maps and trying to find the coordinate of the left top corner of the map I find (52.016496, 4.342888) (see https://www.google.nl/maps/place/52°00'59.4"N+4°20'34.4"E/@52.016496,4.3406993,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0x0!8m2!3d52.016496!4d4.342888?hl=en) but I calculated (52.015191, 4.350527). This is slightly off, but on a scale of a city this difference is too large to find the exact location. By using linear interpolation of the left top corner and the right bottom corner of the map to find out the position of the station gives me the orange dot as shown in my picture. This is unfortunately too much difference.

My question is, is this method just not accurate on a scale of a city or did I do any incorrect calculations?

METHOD 2:

Since the previous method didn't work out as I would like it to be, I continued to search to calculated the (x,y) coordinates of the marker directly. According to a random post on Stackoverflow it was possible to directly calculate it by knowing only:

Center (x,y) and (lat, long)
Point(lat,long)
Zoom

Unfortunately this person didn't state how this could be done, and since the topic was over two years old, any help would probably come to late. So my question is, is this possible and if so, how?

 

[Appsurd]

Anyone?

 

[breitenbach128]

Not a huge help, but I am working a similar problem. I am fooling around with some AR stuff, and I wanted to use the HTML5 geolocation calls to run into a google static map based on extension. I ended up going more and more into javascript with my own extension based on examples I could find. I have been pretty unsuccessful so far. I don't quite know what I am doing enough to make the changes I need.

The end goal is to have a timer update the map to recenter on the position, and for clicks to place markers on real world coordinates. I would love to have it most of it in GML, so your stuff looks more promising than mine.

 

[Appsurd]

The end goal is to have a timer update the map to recenter on the position, and for clicks to place markers on real world coordinates. I would love to have it most of it in GML, so your stuff looks more promising than mine.

Interesting goal indeed! I stopped this project due to other reasons, but I am still really interested if you find a solution!