score:0

markerimage has been deprecated in maps v3.

in any case, check out symbols from the developers guide, and then this example:

based on that example, try this:

var marker = new google.maps.marker({
    position: new google.maps.latlng(38.4269929, -81.7921109),
    icon: {
        path: $('#svg_elem').attr('d'),
        //style elements: fillcolor, strokeweight, etc
        // ...
    },
    map: map
});

i'm not sure if you can get everything you'd like in one svg path (text, etc) but that should get you most of the way there. there are other methods in the google maps api that may be able to get the text on top without too much hassle.

score:0

after running into the above snafu with google maps, i just decided to start using leaflet, css3, and l.divicon, see my solution below.

.markericon {
    width: 30px;
    height: 32px;
    box-shadow: 0 0 1px white;
}

.markericon .arrow {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    margin: 0 auto;
    border-top: 8px solid #446cff;
}

.markericon .top {
    color: white;
    font-size: 11px;
    text-align: center;
    width: 30px;
    height: 32px;
    background-color: #446cff;
    line-height: 1.3em;
    padding-top: 2px;
}

<div class="markerholder" style="display: none">
    <div class="markericon">
        <div class="top">header<br><span id="value">888</span></div>
        <div class="arrow"></div>
    </div>
</div>

var $marker = $('#value').text('99');
var marker = new ftzmarker(l.latlng(lat, lng), {
    icon: l.divicon({
        html: $('.markerholder').html()
    })
})

score:0

the only workaround i can think of, is having to create two markers, one with the image and another with the text and add the text marker at the same anchor as the image marker, but a layer above it. this will require some functions for binding the two markers if you want the marker to be draggable(an event listener that listens to one marker, gets it's coords, and assigns the coords to the second marker so it is moved as well. tricky, but possible.

score:0

there is a solution which might be helpful in this case.

you can use an alternative 'url' with base64 encoded svg:

var svg = '<svg width="400" height="110"><rect width="300" height="100" /></svg>';
icon.url = 'data:image/svg+xml;charset=utf-8;base64,' + btoa(svg);

javascript (firefox) btoa() is used to get the base64 encoding from the svg text. your may also use http://dopiaza.org/tools/datauri/index.php to generate base data urls.

here is a full example jsfiddle:

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    </head>
    <body>
        <div id="map" style="width: 500px; height: 400px;"></div>
        <script type="text/javascript">
            var map = new google.maps.map(document.getelementbyid('map'), {
                zoom: 10,
                center: new google.maps.latlng(-33.92, 151.25),
                maptypeid: google.maps.maptypeid.roadmap
            });

            var template = [
                '<?xml version="1.0"?>',
                    '<svg width="26px" height="26px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">',
                        '<circle stroke="#222" fill="{{ color }}" cx="50" cy="50" r="35"/>',
                    '</svg>'
                ].join('\n');
            var svg = template.replace('{{ color }}', '#800');

            var docmarker = new google.maps.marker({
                position: new google.maps.latlng(-33.92, 151.25),
                map: map,
                title: 'dynamic svg marker',
                icon: { url: 'data:image/svg+xml;charset=utf-8;base64,' + btoa(svg) }
              });
        </script>
    </body>
</html>

additional information and an other solution using infobox can be found here.

although this answer might be too late for you, it might help others looking for a solution to the same problem.


Related Query

More Query from same tag