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

meteorjs_map.jpg
Quote
Change will not come if we wait for some other person, or if we wait for some other time
Barack Obama
Categories
Archive ↓