Replace Google Maps Map

Asked

Viewed 631 times

2

My question is how to use the google maps library with another map, or image.

I found an interesting example that made me thoughtful, but I couldn’t find an answer so far.

This is the example: http://pwmap.ru/pwi/

And some images:

Interactive map for Perfect World Online game

Interactive map for Perfect World Online game - Zoom baixo

Have I seen another example with game maps, such as the GTA, anyone could explain to me, or indicate me a site or tutorial that shows something on the subject? 'Cause in the library documentation I couldn’t find out how to do it.

Grateful,

  • Have a look at http://openlayers.org/.

  • 1

    I downloaded the site, and that’s really what I wanted, but now another "problem" has arisen, as I Gero the Tiles from a large image I have on my computer, I found a program, maptiler, but with the free version of it only has 2 levels of zoom and fills my map with their logo, is there any other program to do this? And a doubt, how I define my own coordinates in that picture?

  • Jean, if openlayers has solved this part of the problem (which was put in the question), I would advise you to create another, now more specific, question with all these new details and doubts. To learn more about chameleon questions: http://meta.pt.stackoverflow.com/questions/1901/essa-questiona-pode-ser-considerada--questiona-camale%C3%A3o. PS: I will include an answer with openlayres to be included here.

  • There is the overlay of Google Maps itself, in this case, using images. Here have an example.

  • Jean Carlo takes a look at my answer below by clicking on "Execute code snippet" and then on "Whole page" because @Bruno César managed to include the snippet, so now has a complete and verifiable example. Btw, take a look at the solution that Paulo indicated, which seems to be interesting, but I don’t know if it’s free.

  • gustavox, the example below solves part of the problem, about the maps api, but how to generate the map images, I have a very large map here, and I do not know how to generate the files in the format

Show 1 more comment

1 answer

3


I believe that using the google maps library with another image is not possible, but there are some similar tools that can help, such as openLayers which is free, and has very advanced features.

At this link you find some examples of what can be done with it. The documentation seems to be quite complete (in English), and doesn’t seem too difficult to implement.

See this example, used in Quick start:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="http://openlayers.org/en/v3.4.0/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'sat'})
          })
        ],
        view: new ol.View({
          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

 

Browser other questions tagged

You are not signed in. Login or sign up in order to post.