Google maps as json data and filter content

Hello,

I have a map with many markers and content like mobile, phone, address, etc that is created from google my maps with an excel sheet. Then I just bring the map with iframe in the site. The people who wanted this functionality loved the simplicity of that idea since they just make changes to the excel sheet and the map updates.

Now they want some kind of filtering or search so they can see specific markers accordingly.

I thought that if I was able to get json response for that map maybe i can create a new map based on that and create the filters or the search.

I read google javascript api and found that for some maps you can get a json response. Or maybe my idea is wrong and should think something else to achieve this without sacrificing user simplicity.

That’s a really great idea to use the spreadsheet!

Unfortunately this is a fairly complex problem, so I can walk you through some psuedo code based on how I’ve done it in the past. Just ask for more details if you get stuck.

The first thing you’ll need is an array of every map marker object created by the Google API. You’ll need this array because when anyone clicks on a category you’ll want to loop through and fire the .setVisible() method to hide all maps not belonging to the category.

Ok, so create every map icon making sure to add a category property:

var markers = [];
forEachMarker:
  marker = new google.maps.Marker({
    ...props...
    category: 'a|b|c'
  })
  markers.push(marker)

Whenever someone clicks on a category, loop through every marker and setVisible to it depending on if it has the category or not:

forEachMarker:
  isVisible = marker[i].category === clickedButton.data('category')
  marker[i].setVisible(isVisible)

Here, clickedButton.data(‘category’) is assuming that the button the user clicked to toggle that category has a data-attribute called ‘category’, something like:

<a href="#" data-category="apples">Show Apples</a>
1 Like

Hi OzRamos,

Thank you. I would like to know if it’s possible to get a json or xml response for that map so I can process and get the data .

Oh I thought you already had the data. I’m not sure what you mean by getting json response from “that” map…is it a map you have already populated, one that you’re embedding, or one on another site? I think I’d need a link to the site to be able to help further

Thank you OzRamos. I read all google API for the maps and something like that isn’t possible with google my maps. So I probably will have to create something custom that will draw data from a spreadsheet and then show it to the map or implement that functionality to their dashboard and with some form to post the data,store them and then I will update the data to the map. Though those are as you said really complicated.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.