안녕하세요. 송기석입니다.

오늘 팁은 미티어에서 구글맵을 사용하는 방법입니다.


[패키지 설치]

meteor add dburles:google-maps


[구현]


style.css

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


구글맵.html
<template name="구글맵">
    <div class="map-container">
        {{> googleMap name="exampleMap" options=exampleMapOptions}}
    </div>
</template>


구글맵.js

Meteor.startup(function() {
    GoogleMaps.load();
});

Template.구글맵.created = function() {
    // We can use the `ready` callback to interact with the map API once the map is ready.
    GoogleMaps.ready('exampleMap', function(map) {
        // Add a marker to the map once it's ready
        var marker = new google.maps.Marker({
            position: map.options.center,
            map: map.instance
        });
    });
};

Template.구글맵.rendered = function() {
    var mapOptions = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var p2 = Session.get('location');

    map.setCenter(new google.maps.LatLng(p2.lat, p2.lng));
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(p2.lat, p2.lng),
        title:'Meine Position',
        icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
    });
    marker.setMap(map);

    Session.set('map', true);
};

Template.구글맵.helpers({
    exampleMapOptions: function() {
        // Make sure the maps API has loaded
        if (GoogleMaps.loaded()) {
            // Map initialization options
            return {
                center: new google.maps.LatLng(37.479513, 127.039033),
                zoom: 18
            };
        }
    }
});

Template.구글맵.events({

});


감사합니다.
이 게시물을...