Skip to content

Instantly share code, notes, and snippets.

@aslafy-z

aslafy-z/gmaps-rightclick-contextmenu.html

Last active July 31, 2016 13:11
Show Gist options
  • Save aslafy-z/df03ee2f5621b4da487c1d9a9ec8ca3d to your computer and use it in GitHub Desktop.
Save aslafy-z/df03ee2f5621b4da487c1d9a9ec8ca3d to your computer and use it in GitHub Desktop.
Download ZIP
Context menu over google maps
Raw
gmaps-rightclick-contextmenu.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.min.css">
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.min.js"></script>
<script src="https://cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.ui.position.min.js"></script>
<script>
var map, clickLoc;
function initialize() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: new google.maps.LatLng(62.323907, -150.109291),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map,'rightclick', function(event){
clickLoc = event.latLng;
$("#map").contextMenu({x: event.pixel.x, y: event.pixel.y});
});
// Hide context menu on several events
google.maps.event.addListener(map,'click', function(event){
$("#map").contextMenu('hide');
});
$.contextMenu({
selector: '#map',
items: {
copyLoc: {
name: "Location",
icon: 'copy',
callback: function() {
console.log(clickLoc.lat() + ', ' + clickLoc.lng());
}
}
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment