使用图像作为谷歌地图并给它坐标

Question

Is there is a way in JavaScript to add offline map to a PHP/HTML page, in such a way that I am just using a JPEG image (of a map) and giving its bounds coordinates (longitude and latitude), and then somehow using those coordinates that I have set for the image (the map) to pinpoint something on it?

For Example:

• I have an image that is 400px wide and 300px long.
• At 1px long the latitude is 44.2353, and at 300px its 49.2539.
• Something similar with longitude.

• And then, code does the following:

  SetMarkerPosition(latitude, longtitude);

A marker appears on the map at the specified coordinates.

Answer 1

Yes, Google caters to this with the Google Static Maps API. You just include an img tag on your HTML page, with the source set to a URL like the following:

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284">

But with a &key=YOUR_API_KEYat the end of the src URL of the image also.

The API documentation describes how to build the URL, what parameters you can put in it, etc.

</div>