강좌 & 팁
글 수 2,412
2015.09.03 18:42:45 (*.39.166.80)
56984
안녕하세요. 송기석입니다.
오늘 팁은 미티어에서 구글맵을 사용하는 방법입니다.
[패키지 설치]
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({
});
감사합니다.