Show google maps when geo location attached

src/web/app/desktop/views/components/posts.post.vue

@@ -49,6 +49,7 @@
 					<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
 				</div>
 				<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.latitude},${p.geo.longitude}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
+				<div class="map" v-if="p.geo" ref="map"></div>
 				<div class="repost" v-if="p.repost">
 					<mk-post-preview class="repost" :post="p.repost"/>
 				</div>
@@ -158,6 +159,21 @@ export default Vue.extend({
 		if ((this as any).os.isSignedIn) {
 			this.connection.on('_connected_', this.onStreamConnected);
 		}
+
+		// Draw map
+		if (this.p.geo) {
+			(this as any).os.getGoogleMaps().then(maps => {
+				const uluru = new maps.LatLng(this.p.geo.latitude, this.p.geo.longitude);
+				const map = new maps.Map(this.$refs.map, {
+					center: uluru,
+					zoom: 15
+				});
+				new maps.Marker({
+					position: uluru,
+					map: map
+				});
+			});
+		}
 	},
 	beforeDestroy() {
 		this.decapture(true);
@@ -447,6 +463,10 @@ export default Vue.extend({
 					font-size 12px
 					color #ccc
 
+				> .map
+					width 100%
+					height 300px
+
 				> .tags
 					margin 4px 0 0 0