Add infoWindow bubble on clicking Google Maps marker

Question

I'd like to add an infoWindow so when I click a marker it displays the title & description in a nice little window bubble.

Using my existing code, can someone give me a little help with how to achieve this?

'park_data' is an array I'm storing the title, longitude & latitude & description of each park in the city.

Javascript

    // controls the display of the park (the result)
    var ParkView = Backbone.View.extend({
    tagName: "article",
    className: "park-container",
    template: $("#parkTemplate").html(),

    render: function () {

        console.log(window.map)
        var marker = new google.maps.Marker({
          map: window.map,
          position: new google.maps.LatLng(this.model.get("lat"), this.model.get("lng")),
          title: this.model.get("title"),
          icon: window.park_icon
        });

        if(this.model.collection.length == 1){
          window.map.setCenter(new google.maps.LatLng(this.model.get("lat"), this.model.get("lng")))
        } else {

            var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng() );
            bounds.extend(latlng);

        }

        console.log("map - here!")

        var tmpl = _.template(this.template);
        //console.log(this.model)
        this.$el.html(tmpl(this.model.toJSON()));
        return this;
    }
});


var MapView = Backbone.View.extend({

    initialize: function () {
        this.collection = new ParkCollection(park_data); //// array is generated in a separate file
        this.render();

    },

    render: function () {

    }
});

I'm using Google Maps 3.8.1.

My array 'park_data' is dynamically generated with PHP and looks a bit like this:

var park_data = [{"title":"Central Park", "lat":"55.8546658", "lng":"-4.241034300000024", "desc":"Description goes here"}]

Many thanks for any help.

Answer 1

You need to create an instance of the infowindow that you can use in the render function.

var infowindow = new google.maps.InfoWindow();

You might need to create that in the initialize function the same way you create the park_data array.

You need to set the content of the infowindow (we don't know what you want here but here is an example)

var marker = new google.maps.Marker({
    map: window.map,
    position: new google.maps.LatLng(this.model.get("lat"), this.model.get("lng")),
    title: this.model.get("title"),
    icon: window.park_icon
});

// Access the infowindow that you created in step 1 and set its content
// That might be something like that:

this.model.infowindow.setContent('Hello World!');

You need an event listener on your marker to open the infowindow on click (put this code after the above code):

google.maps.event.addListener(marker, 'click', function () {

    this.model.infowindow.open(map, marker);
});

As I said, I don't know about backbone.js so I am not sure about how you are supposed to declare / retrieve your variables, but that should help you get started.

Hope this helps!