{"action":"created","issue":{"url":"https://api.github.com/repos/xkjyeah/vue-google-maps/issues/289","repository_url":"https://api.github.com/repos/xkjyeah/vue-google-maps","labels_url":"https://api.github.com/repos/xkjyeah/vue-google-maps/issues/289/labels{/name}","comments_url":"https://api.github.com/repos/xkjyeah/vue-google-maps/issues/289/comments","events_url":"https://api.github.com/repos/xkjyeah/vue-google-maps/issues/289/events","html_url":"https://github.com/xkjyeah/vue-google-maps/issues/289","id":287037744,"node_id":"MDU6SXNzdWUyODcwMzc3NDQ=","number":289,"title":"marker slot for custom dom element not working","user":{"login":"eregnier","id":5399780,"node_id":"MDQ6VXNlcjUzOTk3ODA=","avatar_url":"https://avatars1.githubusercontent.com/u/5399780?v=4","gravatar_id":"","url":"https://api.github.com/users/eregnier","html_url":"https://github.com/eregnier","followers_url":"https://api.github.com/users/eregnier/followers","following_url":"https://api.github.com/users/eregnier/following{/other_user}","gists_url":"https://api.github.com/users/eregnier/gists{/gist_id}","starred_url":"https://api.github.com/users/eregnier/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/eregnier/subscriptions","organizations_url":"https://api.github.com/users/eregnier/orgs","repos_url":"https://api.github.com/users/eregnier/repos","events_url":"https://api.github.com/users/eregnier/events{/privacy}","received_events_url":"https://api.github.com/users/eregnier/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":15,"created_at":"2018-01-09T10:22:57Z","updated_at":"2018-09-04T09:10:27Z","closed_at":"2018-09-04T09:10:27Z","author_association":"NONE","body":"I am trying the following code for my custom map where I want to display custom markers (in my case, I would like to use svg tag to render clean icons)\r\n\r\n    <gmap-map\r\n          :center=\"center\"\r\n          :zoom=\"15\"\r\n          style=\"width: 500px; height: 300px\"\r\n        >\r\n          <gmap-marker\r\n            :key=\"index\"\r\n            v-for=\"(m, index) in markers\"\r\n            :position=\"m\"\r\n          >\r\n              <div class\"custom-tag\"><!--custom marker using vue google map slot feature, magic there not working--><svg>...</svg></div>\r\n          </gmap-marker>\r\n    </gmap-map>\r\n\r\ntherefore, I noticed that the marker implementation for vue2 google maps seems to take care of this behavior\r\n\r\n    //components/marker.js\r\n    render(h) {\r\n       if (!this.$slots.default || this.$slots.default.length == 0) {\r\n        return '';\r\n      } else if (this.$slots.default.length == 1) { // So that infowindows can have a marker parent\r\n        return this.$slots.default[0];\r\n      } else {\r\n        return h(\r\n          'div',\r\n          this.$slots.default\r\n        );\r\n      }\r\n    },\r\n\r\nBut the render is invisible or dom element is not created (dev tools have strange behavior with google map, so I did not mind how to find rendered markers dom elements).\r\n\r\nI am currently using svg icon assets that let me display icons only using svg tags with xlink:href values like 'asset.svg#icon_id'. Transclusion works properly on ngMap similar component. Any fix/help would be appreciated.\r\n  "},"comment":{"url":"https://api.github.com/repos/xkjyeah/vue-google-maps/issues/comments/418296683","html_url":"https://github.com/xkjyeah/vue-google-maps/issues/289#issuecomment-418296683","issue_url":"https://api.github.com/repos/xkjyeah/vue-google-maps/issues/289","id":418296683,"node_id":"MDEyOklzc3VlQ29tbWVudDQxODI5NjY4Mw==","user":{"login":"eregnier","id":5399780,"node_id":"MDQ6VXNlcjUzOTk3ODA=","avatar_url":"https://avatars1.githubusercontent.com/u/5399780?v=4","gravatar_id":"","url":"https://api.github.com/users/eregnier","html_url":"https://github.com/eregnier","followers_url":"https://api.github.com/users/eregnier/followers","following_url":"https://api.github.com/users/eregnier/following{/other_user}","gists_url":"https://api.github.com/users/eregnier/gists{/gist_id}","starred_url":"https://api.github.com/users/eregnier/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/eregnier/subscriptions","organizations_url":"https://api.github.com/users/eregnier/orgs","repos_url":"https://api.github.com/users/eregnier/repos","events_url":"https://api.github.com/users/eregnier/events{/privacy}","received_events_url":"https://api.github.com/users/eregnier/received_events","type":"User","site_admin":false},"created_at":"2018-09-04T09:10:27Z","updated_at":"2018-09-04T09:10:27Z","author_association":"NONE","body":"Finally it seems that the marker system in this library only manage images and no custom dom elements with slot. This is not a true issue then, the plugin I made almost do the job. https://www.npmjs.com/package/vue2-gmap-custom-marker"}}
{"actor":{"display_login":"eregnier"}}