I have been building mashups using Google Maps since 2007 and one problem I had is passing in the content for these bubbles that show up when you click on a marker i.e. the InfoWindow. One big annoyance with it, is that you have to pass in the HTML content as a string when opening the marker. I don't like it because I have to intertwine HTML inside of JavaScript. So how can we make this better?
Dojo Templates
Dojo Templates is the number one reason I love this library, I like the
PubSub mechanism I posted about last time but not as much as the templates.
Dojo Templates allow you to associate HTML template files with your widgets, that get instantiated when Dojo parses your page and constructs the widget, basically replacing the references to your widgets with the widget's markup in the HTML template file.
First: my infowindow.html template file
<div class="infoWindowContainer" dojoattachpoint="infoWindow">
<h1>${title}</h1>
</div>
Don't worry about that ${title} thing just yet, but I guess you already can see where I am going with this.
Second: my infowindow.js widget
dojo.declare(
"nael.widgets.infowindow",
[dijit._Widget, dijit._Templated],
{
templatePath: new dojo.moduleUrl('nael.templates', 'infowindow.html'),
constructor: function(){
}
}
);
In this example, my infowindow widget's constructor is empty.
Next we create the marker. Here we using
dojo.forEach to loop over all the points that were returned with our AJAX response to fetch points.
this.map is the object within this map controller that references the Google Map. (This is the same controller from the previous post on
Dojo PubSub mechanism)
dojo.forEach(pois, dojo.hitch(this, function(p){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(p.lat, p.lng),
map: this.map
});
var content = "<div class='infoWindow' dojoType='nael.widgets.infowindow' title='"+p.Pois.name+"'>
" ;
this.addInfoWindowToMarker(marker,content);
}));
The important part is the line where we add the content. Yes, we still need markup in there, but now its just a placeholder for the real markup. We can pass attributes like
title into the placeholder for
nael.widgets.infowindow. So anything that you want displayed in the info window becomes an attribute. This allows you to focus on content, and not worry about presentation just yet.
The last method we call
addInfoWindowToMarker creates a Google maps listener on the marker and connects the info window to it. Note, that the info window here, is not the widget we created in the beginning. The one at the top is "nael's infowindow" and only serves the purpose of templating.
addInfoWindowToMarker: function(marker,content){
google.maps.event.addListener(marker, 'click', dojo.hitch(this, function(){
this.infoWindow.content = content;
this.infoWindow.maxWidth = 300;
this.infoWindow.open(this.map, marker);
}));
}
If you try the above, and click on the marker, the content will still be empty. Because this is a widget, it needs to be constructed. You need to tell Dojo when to parse the DOM to look for new widgets that you introduced since the last parse.
google.maps.event.addListener(this.infoWindow, "domready", dojo.hitch(this, function(){
dojo.parser.parse(this.mapCanvasNode.id);
}));
We don't want Dojo to go looking through the whole DOM for new widgets, we know where the widget was added. So we can just tell Dojo to look for widgets within the div referenced by the HTML id
this.mapCanvasNode.id)
Finally, back to our infowindow.html template:
<div class="infoWindowContainer" dojoattachpoint="infoWindow">
<h1>${title}</h1>
</div>
We can now adjust the template as we please without trouble, and this sure is much cleaner than doing this like I used to for years.
var content = "<div class='infoWindowContainer'>";
content += "<h1>" + title + "</h1>";
content += "</div>";
Maybe one day Google Maps will support templating the HTML for InfoWindows internally, until then, I'm sticking to the above when I can.
The benefit of templating the InfoWindow becomes obvious when you are dealing with complex InfoWindows with functionality built into it such as sharing on social networks, embedded videos, AJAX requests, pictures, etc. All that stuff can be templated, and only the dynamic stuff that comes from the backend is passed through.
Of course, on top of being able to template your InfoWindow markup, it is much easier now to replace an InfoWindow with a version 2.0 of the InfoWindow. You just have to drop in the new and improved widget and template, then abide by the Pub Sub channels you have defined between the widget and the rest of the application.
