Custom map icons, not an issue really.

[darcemac]

Hi mate! Thanks so much for the theme, currently it using for a Site/Store and its been great!

Can I ask how you go about adding custom Google map icons ?

Thanks

[alvinkonda]

Hi, I'm glad to hear that you are enjoying it.

Unfortunately, this is out of the scope of this theme and probably requires some programming knowledge to get it done. You may follow it here:
https://developers.google.com/maps/documentation/javascript/custom-markers

[darcemac]

Hey thanks for your response. I don’t necessarily need the theme to provide this functionality, just wondering if you had done this before. I've done it with Wordpress sites in the past easily enough by setting up a variable for the image folder but trying to access the assets folder from a js file in Shopify isn’t that easy it seems. Cheers

…

On 9 Sep 2021, at 3:33 pm, Alvin Konda ***@***.***> wrote: Hi, I'm glad to hear that you are enjoying it. Unfortunately, this is out of the scope of this theme and probably requires some programming knowledge to get it done. You may follow it here: https://developers.google.com/maps/documentation/javascript/custom-markers <https://developers.google.com/maps/documentation/javascript/custom-markers> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#52 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOCYHUB4XHSHIM37UTW6JTUBBPMZANCNFSM5DWJYWMQ>. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[alvinkonda]

I'm not that familiar with custom map icons to be sincere but to access your assets folder, you can work directly on the section liquid file under the sections folder. Let me know!

[darcemac]

In the maps.js file I though I could rename it to maps.js.liquid and then use the following to get access to the svg file in the assets folder const iconBase = "{{ asset_url }}"; const marker = new google.maps.Marker({ position: latLng, icon: iconBase + 'icon.svg', map }); But it doesn't appear to work as I thought. I'm new to Shopify so perhaps I'm missing something? Cheers, Darcy

…

On 9 Sep 2021, at 9:30 pm, Alvin Konda ***@***.***> wrote: I'm not that familiar with custom map icons to be sincere but to access your assets folder, you can work directly on the section liquid file under the sections folder. Let me know! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#52 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOCYHRAERO2K3C733Q6LPTUBCZHFANCNFSM5DWJYWMQ>. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[alvinkonda]

You can not access the icon like that, asset_url is a filter which means it needs to be applied to something.

E.G:
const iconBase = "{{ 'icon.svg' | asset_url }}";

Also, better to stay way from .js.liquid extensions and use just .js file. To access the liquid code on JS just open theme.liquid and use sth like this

<script>
window.iconBase = "{{ 'icon.svg' | asset_url }}"
</script>

and you can get the iconBase variable anywhere now.

[darcemac]

I read somewhere that if you use .js.liquid, I would be able use the filter {{ asset_url }}, but I’m totally happy to be corrected. I will test this <script> window.iconBase = "{{ 'icon.svg' | asset_url }}" </script> and thanks, I appreciate your help!

…

On 10 Sep 2021, at 3:33 pm, Alvin Konda ***@***.***> wrote: You can not access the icon like that, asset_url is a filter which means it needs to be applied to something. E.G: const iconBase = "{{ 'icon.svg' | asset_url }}"; Also, better to stay way from .js.liquid extensions and use just .js file. To access the liquid code on JS just open theme.liquid and use sth like this <script> window.iconBase = "{{ 'icon.svg' | asset_url }}" </script> and you can get the iconBase variable anywhere now. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#53 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOCYHUGYNDAGKL62AQ5PD3UBGYGPANCNFSM5DYX7GOA>. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.