Search code examples
canvasgoogle-maps-api-3maps

Is this possible with the Google Maps API to have an interactive map or a continent that you can put pins on?


Before I explain this this map is mean to be seen within a webpage. So we're talking about a web page/web app kind of view (not a native mobile OS app) or anything like that.

So I was wondering if it was possible to generate a silhouetted version of a continent, say, South America, that renders on the browser (either with canvas or whatever way) and then through a back end CRUD form to enter coordinates for a place within that continent and have pins automatically render on top of the silhouetted continent image in the right places (according to scale) so if you enter the coordinates for a place in Sao Paulo then the pin gets drawn on the map as closes as possible within the image of South America contained within these dimensions say: 400px by 700px.

Is this entirely possible or (even parts of it) though the Google Maps API? If so, could you point me to any appropriate examples or documentation?

EDIT: If I were to use their map to display South America, is it then possible to load their map so that South America always shows in its entirety within a container of 400px by 700px (or the closest possible rectangle with the right aspect ratio)?


Solution

  • There's a couple of ways you could do this. Either using

    1. Map Styling to only show the continental outlines, or

    2. A custom map type to replace the map image with your own

    In either case you probably would also want to use Polygons to render the borders of the country