How did they do this on Google Maps?

Question

Link: http://www.usnaviguide.com/v3maps/ProjectedOverlayTest.htm I've been wanting to do something exactly like this for awhile now and can't figure out how they used their own custom image as the background this Google Maps Page. I want to know how they did the overlay on the map, but also if there would be a way to search for a specific spot (just like in the regular Google Maps where you can search for your address and it will zoom into your house). I'm not too good at programming, but I'd assume that it would be involved. Any help/explanation would be much appreciated.

Answer 1

This is done using the javascript google mapa v3 api. It uses what is known as a custom overlay.



This will require Basic knowledge of javascript, and the HTML DOM.....





To add an custom image as an overlay, you simply create a new custom overlay object.



overlay = new google.maps.OverlayView(bounds,image,map)



You will need to define your options for bounds(where your image is displayed),image(location of your image file), and map(div on the map canvas).



If this is confusing to you, visit the Link below, which will help you understand better.





To add a search feature, simply create a new text field on your page, with a button, and add an onclick handler that will geocode the users input, (translate a input address or location into google maps latlng coordinates) and update the result to the map canvas.



For more on custom overlays:



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



For more on geocoding:



https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

Answer 2

You don't necessarily have to have use the API or any programming. If you have a KML file (from Google earth) of the area, you can make your own custom map in Google Fusion Tables. I just threw this together from a KML file I had of a tornado path. I loaded the KML file into Google Fusion Tables, clicked on the 'map the geometry tab' made it public then published it. It doesn't have the address search, but I literally spent 5 minutes on it. http://tinyurl.com/lvlv2bj



Now if you want to get fancier but with an address search, check out ArcGIS Online. You can create a free account. But I make several maps there for my job. You have to provide the data but there is tons of public data available if you know where to look or how to use it. It just takes some learning. Or you can create the map data layer on the map, share and publish it. It even has an address search if you want to include one. This is just a gallery of sample maps. It's not that hard to use. And there is ZERO programming involved. You just have to do a little learning.

http://www.arcgis.com/home/gallery.html

Answer 3

Looks like they're using the Google Maps API



https://developers.google.com/maps/documentation/javascript/overlays

Answer 4

I have faced this problem ,if you want further expertise than call on this toll free (1800 256 3510)