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