<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",
          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>
// Code goes here

/* Styles go here */