Copy into clipboard the coordinates of this image from the box bellow - you will need it later for pasting into MapTiler Desktop!
With any graphic editing software you can easily create a new overlay layer with an exact geo positioning on top of this image of the base map. The downloaded map image can be proportionally resized, so you can prepare an overlay with a significantly higher resolution then the downloaded image - the coordinates will not change. Once you are finished with your own map editing on top of this layer, save just your new overlay layer as a PNG with transparency covering exactly the same area as the original image.
Open MapTiler Desktop, choose "Tiles a la Google Maps" and drop in your own generated PNG file with transparency. To correctly position your image use these options:
When asked for "Missing georeference" choose the option Specify bounding box (West South East North) and paste in the dialog the coordinates from the above box in Step 2.
When asked for "Missing coordinate system" choose in the dropdown the option Specify the id-number from EPSG/ESRI database and type in the input box number 3857 for EPSG:3857 and follow by click on "Set" button next to it.
Now you can click "Continue", keep the default output options and click "Render"to prepare your map. You will get perfectly aligned zoomable map overlay displayed in Google Maps API, which can be further enriched with JavaScript programming with markers or additional functionality. The same rendered map tiles can be used to create your own native mobile application to show users their actual position on the map you drawn.