Google maps

tutorial: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

by johannpickard

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>


<div id="map-canvas"></div>

<div id="my-context-menu" >

        <div class="menu">
            <div class="menu-item" > <a href="javascript:alert('Click for options');;">Send Gaurd message</a></div>
            <div class="menu-item"> <a href="javascript:alert('Showing guard details');">See Guard Details</a></div>
            <hr>
            <div class="menu-item">Send Gaurd to booms</div>
    <div class="menu-item"> <a href="javascript:alert('Showing guard details');">Send to location</a></div>
            <hr>
            <div class="menu-item">Phone Gaurd</div>
        </div>
</div>



<div id="my-context-menu2" >

        <div class="menu">
            <div class="menu-item" > <a href="javascript:alert('Click for options');;">Send Gaurd message</a></div>
            <div class="menu-item"> <a href="javascript:alert('Showing guard details');">See Guard Details</a></div>
            <hr>
            <div class="menu-item">Send Gaurd to booms</div>
    <div class="menu-item"> <a href="javascript:alert('Showing guard details');">Send to location</a></div>
            <hr>
            <div class="menu-item">Phone Gaurd</div>
        </div>
</div>

CSS

body, html{
    height: 100%;
    width: 100%;

}

#map-canvas {
    height: 100%;
    width: 100%;
    background-color: #CCC;
}

#my-context-menu {

    position: absolute;
    display:none;
    background-color: white;
    border: 2px solid Red;
    padding: 15px;
    white-space:no-wrap;
}


#my-context-menu2 {

    position: absolute;
    display:none;
    background-color: white;
    border: 2px solid Blue;
    padding: 15px;
    white-space:no-wrap;
}

JavaScript

function initialize() {

//////////////////CREATE MAP/////////////////// 
    var myLatLng = new google.maps.LatLng(45.4375, 12.3358),
        myOptions = {
            zoom: 5,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
//////////////////////////////////////////////////////////         
        
        
        
/////////////////////////ADD MARKER////////////////////////         
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Click for more options'
  });
////////////////////////////////////////////////////////// 
  
  
  
  







///////////////MAP HOVER MARKER LISTENER////////////////// 
    google.maps.event.addListener(marker, 'mouseover', function () {
    
//alert('Click for options');
    });
////////////////////////////////////////////////////////// 



//////////////////Gets the context menu element///////////
var ContextMenu = document.getElementById("my-context-menu");
var ContextMenu2 = document.getElementById("my-context-menu2");



//////////////////////Click on marker to show menu/////////////
//////////////////////////MAP MARKER LISTENER//////////////////  
google.maps.event.addListener(marker,  'click',  function(ev) { 



ShowContextMenuGoolge(ContextMenu2, ev);

		/** this stop NOT stopping DOM 'context-menu' event from firing */
				ev.stop();

});
//////////////////////////////////////////////////////////  












////////////////////right click to bring up menu//////////
////////////////////////////RIGHT CLICK LISTENER////////// 
	 google.maps.event.addListener(map, 'rightclick', function (ev) {
        ShowContextMenuGoolge(ContextMenu, ev);
        
				/** this stop NOT stopping DOM 'context-menu' event from firing */
				ev.stop();

    });
//////////////////////////////////////////////////////////     


///////////////////left click on map...