<%-- google geocoding maps--%> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnRA1CvBUdFF22IYWlK_dKmW71Vl-Mz7M&v=3.exp&sensor=false"></script> <style type="text/css"> .minimap { min-height: 320px; margin-top: 10px; background-color: #f2f2f2; /*-webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5);*/ /*-moz-box-shadow: 0 2px 12px rgba(0,0,0,.5);*/ /*box-shadow: 0 1px 2px #000;*/ } </style> <div id='mapOnWorkItemDiv' class="minimap"></div> <script> function addMarkerOnMap(loc) { if ($('#endAddrLatitude')) { $('#endAddrLatitude').val(loc.lat()); } if ($('#endAddrLongitude')) { $('#endAddrLongitude').val(loc.lng()); } addMarker(loc); } function showLocationOnMapDiv(loc) { var mapOptions = { zoom: 15, center: loc, mapTypeId: google.maps.MapTypeId.ROADMAP } $('#mapOnWorkItemDiv').css('height', '280px').css('border', '#555555 1px solid').fadeIn(); if ($('#addrLatitude')) { $('#addrLatitude').val(loc.lat()); } if ($('#addrLongitude')) { $('#addrLongitude').val(loc.lng()); } map = new google.maps.Map(document.getElementById('mapOnWorkItemDiv'), mapOptions); map.setCenter(loc); addMarker(loc); } function addMarker(loc) { var marker = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, position: loc }); tryToDisplayRoute(); } function tryToDisplayRoute() { if ($('#addrLatitude') && $('#addrLatitude').val() != '' && $('#addrLongitude') && $('#addrLongitude').val() != '' && $('#endAddrLatitude') && $('#endAddrLatitude').val() != '' && $('#endAddrLongitude') && $('#endAddrLongitude').val() != '') { var start = new google.maps.LatLng($('#addrLatitude').val(), $('#addrLongitude').val()); var end = new google.maps.LatLng($('#endAddrLatitude').val(), $('#endAddrLongitude').val()); displayRoute(start, end); } } function displayRoute(startLoc, endLoc) { var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object directionsDisplay.setMap(map); // map should be already initialized. var request = { origin : startLoc, destination : endLoc, travelMode : google.maps.TravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } <script> <script> showLocationOnMapDiv(new google.maps.LatLng(40.730610, -73.935242, true)); </script> |