How to create google map with marker cluster in Meteor.js

How to create google map with marker cluster in Meteor.js Meteor JS 02.06.2016

Just snippet ... just code.

Dependency

coffeescript
dburles:google-maps
oakworks:marker-clusterer@=0.1.1

Why marker-clusterer 0.1.1? Because last version 0.1.2 doesn't work correct, you can see bug here.

Template

<body>
  {{> markers}}
</body>

<template name="markers">
    <div class="map-container">
        {{> googleMap name="map" options=mapOptions}}
    </div>
</template>

Styles

.map-container {
    width: 800px;
    height: 500px;
}

View

Template.markers.onCreated ->
    GoogleMaps.load({ v: '3', key: '123', libraries: 'geometry,places' });

Template.markers.onRendered ->
    GoogleMaps.ready("map", (map) ->
        infowindow = new google.maps.InfoWindow()
        bounds = new google.maps.LatLngBounds()
        markers = []

        # helpers
        setInfowindow = (place, marker) ->
            marker.addListener("click", ->
                infowindow.setContent("<div><img src='#{place.icon}' width='18'> 
                #{place.name}<br>#{place.vicinity}</div>")
                infowindow.open(map.instance, marker)
            )

        createMarkers = (results) ->
            for place in results
                pin = new google.maps.MarkerImage(place.icon, null, null, null, new google.maps.Size(32, 32));
                latLng = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng())
                marker = new google.maps.Marker({
                    position: latLng,
                    icon: pin,
                    map: map.instance
                });
                markers.push(marker)
                bounds.extend(latLng)
                setInfowindow(place, marker)

        # load
        request =
            location: map.options.center
            radius: '1000'

        service = new google.maps.places.PlacesService(map.instance)
        service.nearbySearch(request, (results, status, pagination) ->
            if status == google.maps.places.PlacesServiceStatus.OK
                createMarkers(results)

                if pagination.hasNextPage
                    pagination.nextPage()

                map.instance.fitBounds(bounds);
                markerCluster = new MarkerClusterer(map.instance, markers, 
                {'imagePath': 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'})
        )
    )

Template.markers.helpers
    mapOptions: ->
        if GoogleMaps.loaded()
            return {
                center: new google.maps.LatLng(49.2348249, 28.399594),
                zoom: 10
            }

Result

How to create google map with marker cluster in Meteor.js Meteor JS 02.06.2016

Quote

Categories

Archive ↓