0

I want to add data layer / overlay to Google Maps App. This data layer can be anything like Photos, Wiki pages, tweets or anything. For example, take a look at MapMyPics. When you zoom into a particular area, you can see the data for that location. I think zooming-in triggers ajax call to fetch the relevant data from the server.

Any tutorials or open-source projects would be highly appreciated.

Humble Learner
  • 791
  • 12
  • 26

1 Answers1

-1

Your link is accomplished with css and divs, using absolute positioning and z index. For example, look at this example provided by google maps:

https://developers.google.com/maps/documentation/javascript/examples/overlay-hideshow

there is a #panel div which is a direct sibling of the google maps container. Both are children of the body element. The #panel div has this css:

#panel {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    left: 50%;
    margin-left: -180px;
    padding: 5px;
    position: absolute;
    top: 5px;
    z-index: 5;
}
JohnMerlino
  • 3,900
  • 4
  • 57
  • 89
  • 1
    Sorry, but this does not answer my question. I am looking for a mashup example - data layer + google maps and not just a single image. – Humble Learner Apr 18 '14 at 02:18
  • If you look at your example and mine, it is both divs with elements inside of them. I don't know what you mean "not just a single image". A div can store as much dom elements as you want... – JohnMerlino Apr 18 '14 at 02:23
  • 1
    I mean adding and removing data from div element depending upon the area using third party API. I would really appreciate if you can provide some example. Apologies for being not clear enough. – Humble Learner Apr 18 '14 at 02:26