Search code examples
jquerycssgoogle-mapsgoogle-maps-embed

Customize google map embed from map maker


At the bottom of this page, http://bonner.gydev.com/, we're doing a basic map embed from google map maker. These lines were all drawn in by someone else and provided in a google earth kmz file, which we were able to import into map maker. The embed is working fine, but I need to get rid of all the overlays and ONLY show the map with lines and maybe zoom icons. No top/title bar, no option to show/hide things from the left menu, etc. Is this possible with a map maker embed? Tried a jquery approach like below, but no luck.

$('iframe').contents().find('.qAWA2').remove();

If not possible, I'm not sure how I could get those line coordinates into a more advanced API setup?

Any help would be greatly appreciated! Thanks, Rich


Solution

  • It would be easy to do that with the Google Maps JavaScript API. Create a map in your page using the API, and load your KML file as shown in this example.

    If you were so motivated, you could then add other useful features. For example after reading the text and seeing the map I want to know: Where's the go-kart track? Where's the stable? Where's the house? You could have a list of features on the side of the satellite map, or even better, make the appropriate words in the main body text clickable, e.g. when you read about taking a fresh mount from the stable, you can click "stable" and zoom in or show a marker on that spot in the map.

    45 degree view would also be really nice, and easy to add once you're using a Maps API map.

    BTW, be wary of using element classes or IDs like the qAWA2 you probably found in the DOM inspector. Even if you did get this to work, it would probably break in the next few weeks. If a name like qAWA2 looks like gibberish and not like something any sensible programmer would use, there's a reason for it. The Maps API JavaScript code is run through a minifier before it's released, and that changes private names (functions, classes, etc.) to arbitrary shorter codes. So each time they release a new build and run it through the minifier, these names may change on you.

    Or it's possible that qAWA2 actually is a name they use in the original Maps API source code (maybe the letters stand for something) - but the same principle still applies: it's not documented, so Google may change it at any time.