Google Maps API SVG Markers Lat Long fro

Google Maps API get Lat Long from Marker Drop zone

by Abid Shaik

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<body>
  <div id="inst">
    Click on the MAP to add Markers with Diferent Colors.
    <br> Select Marker Type:
    <select class="selOptImgType" onchange="ChangeIcon()">
      <option value="CIRCLE">Select Marker Type</option>
      <option value="BOX">BOX</option>
      <option value="BOX_ROUND">BOX - ROUND</option>
      <option value="CIRCLE">CIRCLE</option>
      <option value="HOUSE">HOUSE</option>
      <option value="PIN_OVAL">PIN - OVAL</option>
      <option value="PIN_SQUARE">PIN - SQUARE</option>
      <option value="STAR">STAR</option>
      <option value="TRIANGLE">TRIANGLE</option>
     <!-- <option value="iconHome">Home</option>
      <option value="iconHome2">Home 2</option>
      <option value="iconHome3">Home 3</option>
      <option value="iconHome4">Home 4</option>
      <option value="iconHome5">Home 5</option>
      <option value="iconHome6">Home 6</option>
      <option value="iconCircle">Dot</option>
      <option value="iconStar">Star</option>
       <option value="iconSquare">Square</option> -->
    </select>
    <select class="selOptImgSize" onchange="ChangeSize()">
      <option value="1.5">Select Size</option>
      <option value="0.25">0.25</option>
      <option value="0.5">0.5</option>
      <option value="0.75">0.75</option>
      <option value="1">1</option>
      <option value="1.25">1.25</option>
      <option value="1.5">1.5</option>
      <option value="1.75">1.75</option>
      <option value="2">2</option>
      <option value="2.25">2.25</option>
      <option value="2.5">2.5</option>     
      <option value="2.75">2.75</option>
      <option value="3">3</option>
      <option value="3.25">3.25</option>
      <option value="3.5">3.5</option>
      <option value="3.75">3.75</option>
      <option value="4">4</option>
      <option value="4.25">4.25</option>
      <option value="4.5">4.5</option>
      <option value="5">5</option>
      <option...

CSS

#map_canvas {
  width: 980px;
  height: 600px;
}

#current {
  padding-top: 25px;
}

#inst {
  font-size: 20px;
  margin: 20px;
  color: #07C;
}

.selOptImgType, .selOptImgSize{
  margin: 5px;
  padding: 5px;
}

JavaScript

var iconSize = 0.75; // Size of the SVG DOT
var iconColor = "#07C"; // COLOR of the DOT

var BOX = "M0,0H72V72H0Z"; 
var BOX_ROUND= "M 7.2 0 L 64.8 0 Q 72 0 72 7.2 L 72 64.8 Q 72 72 64.8 72 L 7.2 72 Q 0 72 0 64.8 L 0 7.2 Q 0 0 7.2 0 Z"; 
var CIRCLE= "M 36 0 C 55.8822509939 0 72 16.1177490061 72 36 C 72 55.8822509939 55.8822509939 72 36 72 C 16.1177490061 72 0 55.8822509939 0 36 C 0 16.1177490061 16.1177490061 0 36 0 Z"; 
var HOUSE= "M72,31.07a1.9,1.9,0,0,0-.69-1.12L60.68,20.77v-14a3.07,3.07,0,0,0-.41-1.57,2.85,2.85,0,0,0-1.87-.65H53.59a2.13,2.13,0,0,0-1.26.53,2,2,0,0,0-.63,1.26V13L37.39.57A2.23,2.23,0,0,0,36,0a2.7,2.7,0,0,0-1.52.58L.4,30.26a1.49,1.49,0,0,0-.4,1,2.38,2.38,0,0,0,.28,1.09l3.14,3.36A1.66,1.66,0,0,0,4.83,36a3.5,3.5,0,0,0,1.33-.76L36,9.28l29.95,26s.95.78,1.44.78a2.15,2.15,0,0,0,1.26-.4l3.09-3.34A1.46,1.46,0,0,0,72,31.07Z M64.86,39.93,36,14.48,7.14,40V66a8.75,8.75,0,0,0,1.39,4.21c1.65,2,2.86,1.73,2.86,1.73H28.81l14.41,0h17a4.25,4.25,0,0,0,3.21-1.71,6.78,6.78,0,0,0,1.43-4.12V39.93Z"; 
var PIN_OVAL= "M36,0A26.31,26.31,0,0,0,9.45,26.1C9.45,49.35,36,72,36,72S62.55,48.9,62.55,26.1A26.31,26.31,0,0,0,36,0Z"; 
var PIN_SQUARE= "M66,0H6A5.78,5.78,0,0,0,0,5.54V55.38a5.78,5.78,0,0,0,6,5.54H24L36,72,48,60.92H66a5.79,5.79,0,0,0,6-5.54V5.54A5.79,5.79,0,0,0,66,0"; 
var STAR= "M 36.01 0 L 44.91 26.92 L 72 27.5 L 50.4 44.72 L 58.26 72 L 36.01 55.72 L 13.76 72 L 21.61 44.72 L 0 27.5 L 27.1 26.92 L 36.01 0 Z"; 
var TRIANGLE= "M5.14,0A5.21,5.21,0,0,0,0,5.14C0,6.87,1.17,8.6,1.93,10.29l28.93,57.9C31.54,69.59,32.95,72,36,72s4.46-2.41,5.14-3.82l28.93-57.9C70.83,8.6,72,6.87,72,5.14A5.21,5.21,0,0,0,66.86,0Z"; 


var iconCircle = "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0"; // SVG PATH for Circle or dor
var iconHome = "M 17.7189998626709 -4.08935546758471e-7 L -1.3732910186803338e-7 16.280999591064454 L 5.562999862670898 16.280999591064454 L 5.562999862670898 31.811999591064456 L 29.874999862670897 31.811999591064456 L 29.874999862670897 16.280999591064454 L 35.4379998626709...