Map Style Options

[ChristopherDosin]

Hi There,

is there any way to add map styles? For example from https://snazzymaps.com
I did not found any option or how to use the Google API Options on this Widget?

[vvo]

Right on time, I am currently working on a fix to provide the user to modify all options passed to the google map object.

So would this: https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions be sufficient?

[ChristopherDosin]

Yep the MapOptions Object is what i am looking for, that should do the trick 👍

[vvo]

Ok, expect a new v2 release of this widget today then (GMT+1)

[ChristopherDosin]

Awesome 👍
By the Way:

I try to add a tooltip to the Markers. In the docs you descriped the following function

function prepareMarkerData(hit, index, hits) {
  return {
    label: hit.name,
    title: hit.description
  }
}

I am pretty new to JS - How would i write this in my widget?
I tried it like so:

            search.addWidget(
              instantsearchGoogleMaps({
                container: document.querySelector('#map'),
                prepareMarkaData: {
                    function prepareMarkerData(hit, index, hits) {
                        return {
                            label: hit.title,
                            title: hit.title
                        }
                    }
                }
              })
            );

But this seem to be wrong. Can you give me a little tip how i would add a custom tooltip to each marker?

[vvo]

Do you mean adding a full InfoWindow as per google map or just a simple browser tooltip?

If simple browser tooltip, you just need to do:

search.addWidget(
  instantsearchGoogleMaps({
    container: document.querySelector('#map'),
    prepareMarkaData: function prepareMarkerData(hit, index, hits) {
      return {
        label: hit.title,
        title: hit.title
      }
    }
  })
);

[ChristopherDosin]

If i click on a Marker on the Google Map i want to show a Bootstrap Tooltip/Popover to show some informations about the hit e.g Title, Image etc.

Pretty much like Airbnb:

I also added the prepareMarkData function, but nothing happens. Here is the JS File and the Live Demo

[vvo]

Yes adding infoWindow is not yet doable, it will come today also.

[vvo]

Do you know how to style googlemap infowindows?

[ChristopherDosin]

Not really but i think i have to read through the Google InfoWindow Docs

If you would have an example how to do this with the Algolia Instantsearch i would be grateful 💃

[vvo]

Sorry this is taking a bit more time, you should have it this week

[ChristopherDosin]

Hi @vvo no problem, take your time. In the meanwhile i will finish my detail view for the properties.

[ChristopherDosin]

@vvo Any news? 👀

[vvo]

Hello @kayyyy, sorry it's taking way more longer than we expected. Priorities have shifted and we need to refocus on building this V2.

We are doing our best to do so and will update accordingly. Thanks

[ivobrett]

hi @vvo, is there any update on this? I would also like to use instantsearch for mapping but I also need an infowindow whenever a user clicks on a pointer. This thread appears to indicate that you were looking into this. any update?

[vvo]

@ivobrett We are no more maintaining this project and will provide in the coming weeks dedicated guides and tooling about building true GEO experiences (like AirBnB) using our InstantSearch libraries.

[vvo]

Here's a simple example on how to plug instantsearch to google maps: https://jsfiddle.net/wkjyev3p/8/