How to round and resize a photo and set it to a custom Google V3 Map API marker

Question

I want to create a custom map marker for Google Maps by combining two images marker_bgand marker_pichow I can do it. marker_bgthere will be a marker with an empty space inside which will be filled marker_pic.

Radius pic and set it to marker?

I use the following technologies;

• HTML5 / JavaScript / CSS3
• Polymer # 0.5
• Google V3 Map API
• Php

Answer 1

You can do something like this.

var marker = new google.maps.Marker({
    map: MAP_INSTANCE,
    position: LOCAIOTN,
    visible: true,
    icon: ICON_PATH
});

use the SVG icon and change the image path to the user image path.

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <image width="80" height="80"
     xlink:href="[USER_ICON_PATH]" />
</svg>

PHP to generate different SVGs for different users.

<?php
$url = 'http://lorempixel.com/200/200/';
echo '<svg width="216" height="216">
    <defs>
        <rect id="rect" x="8" y="8"width="200" height="200" rx="50%"/>
        <clipPath id="clip">
          <use xlink:href="#rect"/>
        </clipPath>
    </defs>
    <use xlink:href="#rect" stroke-width="8" stroke="black"/>
    <image xlink:href="' . $url . '"  width="100%" height="100%" clip-path="url(#clip)"/>
</svg>';
?>

http://jsfiddle.net/bhkxxh90/43/

UPDATE: php

UPDATE: jsfiddle anwser

Answer 2

. , 2 , 1 - 1, png , 2 - 2 , 2 - 1 , :)

https://www.upsieutoc.com/image/ps9v

code

function setMarker(avataUrl, location){
(function(avataUrl,location){
    var layer1 = new google.maps.Marker({
                    map: map,
                    location: location,
                    icon : 'url image layer 1'
                });
    var layer2 = new google.maps.Marker({
                    map: map,
                    location: location,
                    icon : avataUrl
                }); 
})(avataUrl,location);
}

Answer 3

, . @jad- panda , , , , , : jsfiddle

<svg width="500" height="500">
    <defs>
        <rect id="rect" x="10%" width="80%" height="80%" rx="50%"/>
        <clipPath id="clip">
          <use xlink:href="#rect"/>
        </clipPath>
    </defs>
    <use xlink:href="#rect"/>
    <image xlink:href="http://lorempixel.com/200/200/"  width="80%" height="80%" x="10%" clip-path="url(#clip)"/>
    <image xlink:href="http://i61.tinypic.com/5zk09e.png"  width="100%" height="100%"/>

</svg>

, , , , x y .