• Multi-character Google Maps cluster marker labels

    Multi-character Google Maps cluster marker labels

    Turns out Google Maps API does not allow for more than a single character on marker labels (everything past the first character gets trimmed). Not even stackoverflow was able to provide me with a good way of going around this (take a look at this and this). So, a little digging was required…

    Fortunately, folks who made google-maps-clustering-csharp were able to go around this restriction by implementing a custom “label element” through prototyping the OverlayView element and then using it instead of a string for Marker’s label property. I extracted and cleaned up the code from their MVC application. What’s left is all you need to render markers that support multiple characters (feel free to break it into multiple files – perhaps a service and a controller if you’re using AngularJS or something similar):

    And this is the CSS that’s needed to make it all work (you can find the cluster icons here):


  • Pre-caching HTML templates with AngularJS ui-router directive

    Pre-caching HTML templates with AngularJS ui-router directive

    Unless you’re using gulp-angular-templatecache (which you probably should) to bundle your HTML templates into an Angular Javascript module, you might in some cases want to pre-cache certain HTML files. For example if you have a specific “error page” HTML template used to display a specific error message telling the user he lost his Internet connection. If you don’t pre-cache such a template, your Angular app won’t be able to fetch it from the server (because the browser is obviously off-line) and as a consequence it will be unable to display this important message.

    If you’re using ui-router, there is an easy way to pull the template from the server before it’s even used. I like having an abstract root state which I setup in my app.config() (inside app.js) to kind of abstract my base layout. Views from this root state can then be overridden by any child state which is very handy for having a few different types of layouts. For example, some with a sidebar, some without, etc.

    The cool thing about the abstract root state is that it will fetch all templates specified inside its views property even if they’re not used right away and it will put them into Angular’s template cache. The next time any of our child ui-router states requires one of these cached templates, it won’t make a request against the server but it will simply reuse the cached template.

    You can use this simple trick to if needed cache any other templates as well. Obviously don’t overdo it because you want to make the smallest amount of initial requests you can to speed-up the loading time. Or even better – use angular-templatecache, it’s wonderful. :)


Back to top