Search code examples
google-mapssvggoogle-maps-api-3polymer

Do svg symbols work well in polymer google-map-marker?

I have set out to make a Google maps application using Polymer. But I have run into difficulties because I would like to use vector map markers rather than raster map markers. icon="dollar_sign.png" works well. icon="dollar_sign.svg" fails.

I see in Google's map markers documentation that there are certain things I can do to accommodate svg markers. But I am not sure how they interact with Polymer. I have a customer waiting for this application. I can't afford to spend much time experimenting.

Has anyone already been down this road, and can tell me whether I will encounter roadblocks? At this point, I can either code it using Polymer, or code it without any framework.

.........Thanks, Rick

Solution

  • Icon property could be specified using one of the following format:

    1) string value, for example: http://www.primeracoop.com/assets/pin.svg

    2) google.maps.Icon object, for example: 

    {
    url: 'http://www.primeracoop.com/assets/pin.svg',
    anchor: { x: 25, y: 50 },
    scaledSize: { height: 50, width: 50 }
}

    3) google.maps.Symbol object, for example: 

    {
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: '#FF0000',
    fillOpacity: .6,
    anchor: { x: 0, y: 0 },
    strokeWeight: 0,
    scale: 1
}

    The following example demonstrates how to set svg icon 

      google-map {
            height: 100vh;
        }
    <head>
    <base href="https://polygit.org/polymer+1.6.0/components/">
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="polymer/polymer.html">
    <link rel="import" href="google-map/google-map.html">
    <link rel="import" href="google-map/google-map-marker.html">
</head>

<body>
 

    <google-map-svg-marker></google-map-svg-marker>

    <dom-module id="google-map-svg-marker">
        <template>

            <google-map latitude="37.77493" longitude="-122.41942">
                <google-map-marker icon="{{icon}}" latitude="37.779" longitude="-122.3892" title="Go Giants!"></google-map-marker>
            </google-map>

        </template>

        <script>
            HTMLImports.whenReady(function () {
                Polymer({
                    is: 'google-map-svg-marker',

                    ready: function () {
                        //this.icon = "http://www.primeracoop.com/assets/pin.svg";

                        this.icon = {
                            url: 'http://www.primeracoop.com/assets/pin.svg',
                            anchor: { x: 25, y: 50 },
                            scaledSize: { height: 50, width: 50 }
                        };

                        /*this.icon = {
                            path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
                            fillColor: '#FF0000',
                            fillOpacity: .6,
                            anchor: { x: 0, y: 0 },
                            strokeWeight: 0,
                            scale: 1
                        };*/
                    },


                    properties: {
                        icon: {
                            type: Object
                        }
                    }

                })

            });
        </script>



    </dom-module>

</body>