<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>JQuery GoogleMaps Editor With Data Loading</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
  <script type="text/javascript" src="https://rawgit.com/dejanstojanovic/JQuery-GoogleMaps/master/src/jquery.googlemaps.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//rawgit.com/dejanstojanovic/JQuery-GoogleMaps/master/src/css/mapstyle.min.css">

  <script type="text/javascript">
    //<![CDATA[ 
    $(window).load(function() {
      $(document).ready(function() {
        $(".map-container").GoogleMapEditor({
          height: 400,
          richtextEditor: true,
          editTemplatesPath: "//rawgit.com/dejanstojanovic/JQuery-GoogleMaps/master/src/html/",
          markerPinsPath: "//rawgit.com/dejanstojanovic/JQuery-GoogleMaps/master/src/img/pin/",
          stylesPath: "//rawgit.com/dejanstojanovic/JQuery-GoogleMaps/master/src/styles.json", 
          locations: [{
            "Coordinates": [{
              "Latitude": 25.056989169783144,
              "Longitude": 55.18715858459473
            }],
            "Radius": 0,
            "LocationType": "marker",
            "Icon": "pin-azure.png",
            "HoverIcon": "pin-green.png",
            "Message": "Hello from pin 1",
            "Tag": null
          }, {
            "Coordinates": [{
              "Latitude": 25.050768779668633,
              "Longitude": 55.212907791137695
            }],
            "Radius": 0,
            "LocationType": "marker",
            "Icon": null,
            "Message": "Hello from pin 2",
            "Tag": null
          }],
          dataChange: function(sender, data) {
            $(sender.container).next().next().val(data);
          }
        });
      });
    }); //]]>
  </script>
</head>

<body>
  <p>Map editor</p>
  <div class="map-container"></div>
  <textarea rows="10" cols="100" style="width:100%"></textarea>
</body>

</html>