Fixed error when icon url for markers

README.md

@@ -4,9 +4,11 @@
 
 ![static google map](https://user-images.githubusercontent.com/461124/28100714-6c896d1e-6689-11e7-8a38-327dfe4b6ff5.png)
 
+[Google Documentation](https://developers.google.com/maps/documentation/static-maps/intro)
+
 ## Demo
 
-- [JSBin example](http://jsbin.com/gawedufesa/edit?html,js,output)
+- [JSBin example](http://jsbin.com/gizixekilu/edit?html,js,output)
 
 ## Requirements
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-static-map",
-	"version": "1.6.3",
+	"version": "2.0.0",
 	"description": "a simple component to generate static google map",
 	"keywords": [
 		"vue",

src/App.vue

@@ -19,12 +19,12 @@ export default {
 	data: () => {
 		const dataValues = {
 			apiKey: '',
-			center: 'Empire State Building',
+			center: 'Brooklyn+Bridge,New+York,NY',
 			format: 'gif',
-			language: 'EN',
+			language: 'ja',
 			markers: [
 				{
-					label: 'B', color: 'blue', lat: 40.702147, lng: -74.015794, size: 'normal',
+					label: 'W', color: 'blue', lat: 40.702147, lng: -74.015794, size: 'normal',
 				},
 				{
 					label: 'Y', color: 'yellow', lat: 40.711614, lng: -74.012318, size: 'tiny',

src/components/StaticMap.vue

@@ -27,12 +27,28 @@ function generateMapUrl() {
 
 function generateMarkers() {
 	const markers = this.markers.map((marker) => {
-		const color = `color:${marker.color}`;
-		const size = `size:${marker.size}`;
-		const label = `label:${marker.label}`;
-		const icon = `icon:${marker.icon}`;
+		const color = `color:${marker.color}|`;
+		const size = `size:${marker.size}|`;
+		const label = `label:${marker.label}|`;
+		const icon = `icon:${marker.icon}|`;
 		const latLng = `${marker.lat},${marker.lng}`;
-		const markerUrl = `&markers=${icon}|${size}|${color}|${label}|${latLng}`;
+		let markerUrl = '&markers=';
+		if (marker.color) {
+			markerUrl += color;
+		}
+		if (marker.size) {
+			markerUrl += size;
+		}
+		if (marker.label) {
+			markerUrl += label;
+		}
+		if (marker.icon) {
+			markerUrl += icon;
+		}
+		if (marker.lat && marker.lng) {
+			markerUrl += latLng;
+		}
+		// const markerUrl = `&markers=${icon}|${size}|${color}|${label}|${latLng}`;
 		return markerUrl;
 	});
 	return markers.join('');