<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 */