<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>JQuery GoogleMaps Editor With Custom Map Style</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">
$(document).ready(function() {
$(".map-container").GoogleMapEditor({
height: 400,
richtextEditor: false,
center: {
"latitude": 25.0946,
"longitude": 55.2779
},
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.073782645952882,
"Longitude": 55.27865409851074
}],
"Radius": 0,
"LocationType": "marker",
"Icon": "pin-azure.png",
"HoverIcon": "pin-green.png",
"Message": "Hello from pin 1",
"Tag": null
}, {
"Coordinates": [{
"Latitude": 25.09663673267224,
"Longitude": 55.257368087768555
}],
"Radius": 0,
"LocationType": "marker",
"Icon": "flag-azure.png",
"HoverIcon": "flag-green.png",
"Message": "Hello from pin 2",
"Tag": null
}, {
"Coordinates": [{
"Latitude": 25.105031039527002,
"Longitude": 55.29298782348633
}],
"Radius": 0,
"LocationType": "marker",
"Icon": "needle-pink.png",
"HoverIcon": "niddle-green.png",
"Message": "",
"Tag": null
}, {
"Coordinates": [{
"Latitude": 25.094615794984726,
"Longitude": 55.27788162231445
}],
"Radius": 0,
"LocationType": "marker",
"Icon": "niddle-green.png",
"HoverIcon": "needle-pink.png",
"Message": "",
"Tag": null
}],
style: [{
"featureType": "landscape",
"stylers": [{
"hue": "#F1FF00"
}, {
"saturation": -27.4
}, {
"lightness": 9.4
}, {
"gamma": 1
}]
}, {
"featureType": "road.highway",
"stylers": [{
"hue": "#0099FF"
}, {
"saturation": -20
}, {
"lightness": 36.4
}, {
"gamma": 1
}]
}, {
"featureType": "road.arterial",
"stylers": [{
"hue": "#00FF4F"
}, {
"saturation": 0
}, {
"lightness": 0
}, {
"gamma": 1
}]
}, {
"featureType": "road.local",
"stylers": [{
"hue": "#FFB300"
}, {
"saturation": -38
}, {
"lightness": 11.2
}, {
"gamma": 1
}]
}, {
"featureType": "water",
"stylers": [{
"hue": "#00B6FF"
}, {
"saturation": 4.2
}, {
"lightness": -63.4
}, {
"gamma": 1
}]
}, {
"featureType": "poi",
"stylers": [{
"hue": "#9FFF00"
}, {
"saturation": 0
}, {
"lightness": 0
}, {
"gamma": 1
}]
}],
dataChange: function(sender, data) {
$(sender.container).next().next().val(data);
},
locationNew: function(map, location) {
$(".status").html("New location added");
},
locationMove: function(map, location) {
$(".status").html("Location moved");
},
locationDelete: function(map, location) {
$(".status").html("Location deleted");
}
});
});
</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 */