CODEWITHSUNDEEP
javascriptsvg
Pankaj Goel
Pankaj Goel

Reputation: 155

how to draw pin location marker like the one on google map using svg

I am using HTML5 Interactive map and i have only one shape for my map pin which is circle, is it possible to make something like google map pin marker by set additional attributes to my circle code:

var pins_config = {
  "pins":[
  {
    "shape": "circle",//either "circle" or "square"
    "hover": "<b><u>DELHI</u></b><br>Write any text and load images<br><img src='example.png'>",//info of the popup
    "pos_X": 185,//check the X, Y coordinates guide in the documentation
    "pos_Y": 195,
    "size": 14,//size of the pin
    "outline": "#660000",//outline color of the pin
    "upColor": "#e60000",//color of the pin when map load
    "overColor": "#ffd480",//color of the pin when mouse hover
    "url": "https://www.google.com/",//link to any webpage
    "target": "new_window",// use "new_window", "same_window", "modal", or "none"
    "active": true//true/false to activate/deactivate this pin
  }  
  ]
};

// The following is the script for pins interaction DON'T EDIT !!!
function isTouchEnabled() {
  return (("ontouchstart" in window)
    || (navigator.MaxTouchPoints > 0)
    || (navigator.msMaxTouchPoints > 0));
}
jQuery(function () {
  var pins_len = pins_config.pins.length;
  if(pins_len > 0) {
    var xmlns = "http://www.w3.org/2000/svg";
    var tsvg_obj = document.getElementById("injspins");
    var svg_circle, svg_rect;
    for (var i = 0; i < pins_len; i++) {
      if (pins_config.pins[i].shape === "circle") {
        svg_circle = document.createElementNS(xmlns, "circle");
        svg_circle.setAttributeNS(null, "cx", pins_config.pins[i].pos_X + 1);
        svg_circle.setAttributeNS(null, "cy", pins_config.pins[i].pos_Y + 1);
        svg_circle.setAttributeNS(null, "r", pins_config.pins[i].size / 2);
        svg_circle.setAttributeNS(null, "fill", "rgba(0, 0, 0, 0.5)");
        tsvg_obj.appendChild(svg_circle);
        svg_circle = document.createElementNS(xmlns, "circle");
        svg_circle.setAttributeNS(null, "cx", pins_config.pins[i].pos_X);
        svg_circle.setAttributeNS(null, "cy", pins_config.pins[i].pos_Y);
        svg_circle.setAttributeNS(null, "r", pins_config.pins[i].size / 2);
        svg_circle.setAttributeNS(null, "fill", pins_config.pins[i].upColor);
        svg_circle.setAttributeNS(null, "stroke", pins_config.pins[i].outline);
        svg_circle.setAttributeNS(null, "stroke-width", 1);
        svg_circle.setAttributeNS(null, "id", "injspins_" + i);
        tsvg_obj.appendChild(svg_circle);
        injsAddEvent(i);
      }
    }
  }
});

I want some thing like this

click to see the image

Upvotes: 1

Views: 227

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

You would need something like this (untested):

if (pins_config.pins[i].shape === "circle") {
  svg_circle = document.createElementNS(xmlns, "circle");
  svg_circle.setAttributeNS(null, "cx", pins_config.pins[i].pos_X + 1);
  svg_circle.setAttributeNS(null, "cy", pins_config.pins[i].pos_Y + 1);
  svg_circle.setAttributeNS(null, "r", pins_config.pins[i].size / 2);
  svg_circle.setAttributeNS(null, "fill", "rgba(0, 0, 0, 0.5)");
  tsvg_obj.appendChild(svg_circle);
  svg_circle = document.createElementNS(xmlns, "circle");
  svg_circle.setAttributeNS(null, "cx", pins_config.pins[i].pos_X);
  svg_circle.setAttributeNS(null, "cy", pins_config.pins[i].pos_Y);
  svg_circle.setAttributeNS(null, "r", pins_config.pins[i].size / 2);
  svg_circle.setAttributeNS(null, "fill", pins_config.pins[i].upColor);
  svg_circle.setAttributeNS(null, "stroke", pins_config.pins[i].outline);
  svg_circle.setAttributeNS(null, "stroke-width", 1);
  svg_circle.setAttributeNS(null, "id", "injspins_" + i);
  tsvg_obj.appendChild(svg_circle);
  injsAddEvent(i);
}
else if (pins_config.pins[i].shape === "flag") {
  let sz = pins_config.pins[i].size;
  // construct a path in the shape of the flag
  svg_flag = document.createElementNS(xmlns, "path");
  svg_flag.setAttribute("d", ['M',
                              pins_config.pins[i].pos_X,
                              pins_config.pins[i].pos_Y,
                              'v', -sz,
                              'l', sz * 0.75, sz * 0.25,
                              'l', -sz * 0.75, sz * 0.25].join(' '));
  svg_flag.setAttribute("fill", pins_config.pins[i].upColor);
  svg_flag.setAttribute("stroke", pins_config.pins[i].outline);
  svg_flag.setAttribute("stroke-width", 1);
  svg_flag.setAttribute("id", "injspins_" + i);
  tsvg_obj.appendChild(svg_flag);
  injsAddEvent(i);
}

Then try setting the pin shape to "flag".

Upvotes: 1

Related Questions