<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>JQuery GoogleMaps Viewer With Data Loading</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
  <script type="text/javascript" src="//rawgit.com/dejanstojanovic/JQuery-GoogleMaps/master/src/jquery.googlemaps.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,
          editMode: false,
          markerPinsPath: "https://rawgit.com/dejanstojanovic/JQuery-GoogleMaps/master/src/img/pin/",
          locations: [{
            "Coordinates": [{
              "Latitude": 25.056989169783144,
              "Longitude": 55.18715858459473
            }],
            "Radius": 0,
            "LocationType": "marker",
            "Icon": "pin-azure.png",
            "Message": "Message from Pin 1",
            "Tag": null
          }, {
            "Coordinates": [{
              "Latitude": 25.050768779668633,
              "Longitude": 55.212907791137695
            }],
            "Radius": 0,
            "LocationType": "marker",
            "Icon": null,
            "Message": "Message from Pin 2",
            "BorderColor": "#ff0000",
            "BorderWeight": 2,
            "FillColor": "#ffff00",
            "Tag": null
          }]
        });
      });
    }); //]]>
  </script>

  <body style="">
    <p>Map viewer</p>
    <div class="map-container"></div>
  </body>

</html>
// Code goes here

/* Styles go here */