Flexible Map
Map tabs to reduce marker clutter (4 posts)

  1. daniish
    Posted 3 years ago #

    I would like to add several tabs to a map - can this be done?

    There are 2 reasons or instances in which they would be useful:

    1. Each tab when clicked could show different categories of markers on the map. For example, a map of a town with a Pubs tab and a Restaurants tab.

    2. Similarly, the tab could show different related maps. For example, one could show a route taken (zoomed out), while another could show a detailed location map (zoomed in).

    Many thanks for your advice


  2. webaware
    Plugin Author

    Posted 3 years ago #

    It can be done, but what you're asking for requires custom controls. They are actually pretty easy to create if you know how to code in JavaScript and know enough CSS to style things, but you probably won't get it in a generic Google Maps plugin for WordPress (although you should probably check for keywords like "layers").

    Take a look at the API reference:

    And especially the section on controls:

    There's a couple of very simple examples on the samples page:

    Here's one I had to knock up a while back, with a menu built up from markers added from a JSON stream. It uses a little jQuery to ease the AJAX side, but otherwise is pretty stock-standard JavaScript and Google Maps API:

    Unminified JavaScript for the above:

    For what you're describing, you'd need to build up your markers in layers, simulate "tabs" with some simple HTML custom controls, and hide/show the layers depending on which "tab" is selected.

  3. daniish
    Posted 3 years ago #

    OK so as i understand it, firstly i need to create an individual KML file for each tab. For example, a Pubs.kml

    Secondly, i need to create an HTML custom control, like the one shown here.

    Thirdly, i need to use the map.addOverlay()/map.removeOverlay() to switch the tabs on and off, as shown in this example.

    Can you tell me where i need to place all this code?

  4. webaware
    Plugin Author

    Posted 3 years ago #

    Firstly, that layer example you linked to is very old -- it's based on v2 of the Google Maps API; you should look instead at v3 references. To hide and show an overlay, you can use the CSS visibility property:

    As to where you put it, you would need to write your own JavaScript for loading the map files into layers. I reckon the simplest approach for your website would be to have a custom post template that has a div for the map, and load a JavaScript script that loads Google Maps on it and creates the different KML layers and custom controls.

    Here's the most simple example for loading a single KML layer into a map (view page source to see how it's all done):

    Here's the reference for layers (several types, you might benefit from some of the others):

    And for some extra reading, Stack Overflow has a whole pile of interesting stuff on KML including handling it within Google Maps:

    Let me be clear here: what I'm suggesting is that instead of using a generic WordPress plugin, you write your own script for loading the different KML files into layers on a map, and create custom controls for hiding / showing them.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Flexible Map
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic