I am new to ASP.NET MCV5 and trying to add Google Maps to get direction from my current position to some destination.
The code below is working fine when I am running it alone in an html file but not working in ASP.NET MVC5 project in .cshtml view. I tried to change http to https in in Google Maps library as suggested in another question, but it is still not working. Any suggestions, please.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', function () {
new google.maps.places.SearchBox(document.getElementById('txtSource'));
new google.maps.places.SearchBox(document.getElementById('txtDestination'));
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
});
function GetRoute() {
var mumbai = new google.maps.LatLng(18.9750, 72.8258);
var mapOptions = {
zoom: 7,
center: mumbai
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('dvPanel'));
//*********DIRECTIONS AND ROUTE**********************//
source = document.getElementById("txtSource").value;
destination = document.getElementById("txtDestination").value;
var request = {
origin: source,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
//*********DISTANCE AND DURATION**********************//
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [source],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
var distance = response.rows[0].elements[0].distance.text;
var duration = response.rows[0].elements[0].duration.text;
var dvDistance = document.getElementById("dvDistance");
dvDistance.innerHTML = "";
dvDistance.innerHTML += "Distance: " + distance + "<br />";
dvDistance.innerHTML += "Duration:" + duration;
} else {
alert("Unable to find the distance via road.");
}
});
}
</script>
<table border="0" cellpadding="0" cellspacing="3">
<tr>
<td colspan="2">
Source:
<input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" />
Destination:
<input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" />
<br />
<input type="button" value="Get Route" onclick="GetRoute()" />
<hr />
</td>
</tr>
<tr>
<td colspan="2">
<div id="dvDistance">
</div>
</td>
</tr>
<tr>
<td>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</td>
<td>
<div id="dvPanel" style="width: 500px; height: 500px">
</div>
</td>
</tr>
</table>
<br />
</body>
</html>
click F12 check in console what error is showing .This google map api may required Google API Key.But it is working fine in .cshtml
Related
In the below code I have values to search, here if I type values in search box it is searching, I need to search when I type and then click enter button in input field.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script>
$(document).ready(function () {
});
</script>
<script>
var app = angular.module('myapp', []);
app.controller('myctrl', function ($scope) {
$scope.collectionCopy = [];
$scope.hided = false;
$scope.collection = [
{ Google: 'Dhoni', Facebook: 'Simla', Twitter: '5000' },
{ Google: 'Kohli', Facebook: 'Manali', Twitter: '15000' },
{ Google: 'Virat', Facebook: 'Rajasthan', Twitter: '35000' },
{ Google: 'Yuvraj', Facebook: 'Kerala', Twitter: '35000' },
{ Google: 'Singh', Facebook: 'Mysore', Twitter: '35000' },
{ Google: 'Murali', Facebook: 'OOTY', Twitter: '20000' },
{ Google: 'Vijay', Facebook: 'Goa', Twitter: '20000' }
];
//Object to hold user input
$scope.userInput = {};
//fetch the value and assign to UserInput variable
$scope.search = function (event) {
if (event.keyCode == 13) {
$scope.userInput = $scope.Google;
}
else
{
$scope.userInput = $scope.Google;
}
}
angular.copy($scope.collection,$scope.collectionCopy);
$scope.hide = function()
{
$(".col2").toggle(1000);
angular.copy($scope.collection,$scope.collectionCopy);
if($scope.hided == false)
{
for(var i = 0; i < $scope.collectionCopy.length; i++) {
var obj = $scope.collectionCopy[i];
//if(listToDelete.indexOf(obj.id) !== -1) {
delete obj['Facebook'];
delete obj['Twitter'];
//}
}
$scope.hided = true;
}
else
{
angular.copy($scope.collection,$scope.collectionCopy);
$scope.hided = false;
}
}
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="Google" ng-keyup="search($event)" style="background-color:#5b2c2c;color:white;">
<input type="button" value="Search" ng-click="search()">
<table class="table" border="1" style="margin:0;margin-left:90px;background-color:white;width:80%;border:5px solid green">
<thead>
<tr>
<th ng-click="hide()" class="col1"><a>Google</a></th>
<th ng-hide="hided" class="col2"><a>Facebook</a></th>
<th ng-hide="hided" class="col2"><a>Twitter</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in collectionCopy | filter:userInput" ng-class-even="'stripped'">
<td >{{record.Google}}</td>
<td ng-hide="hided" class="col2">{{record.Facebook}}</td>
<td ng-hide="hided" class="col2">{{record.Twitter}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In the search function, you are searching in checking for enter key, but you are searching in else case too. I created searcher function, which is triggered only if enter key is pressed or button is clicked (check onclick on button change too)
See this edited plunkr
$scope.search = function (event) {
if (event.keyCode == 13) {
$scope.searcher();
}
}
$scope.searcher = function() {
$scope.userInput = $scope.Google;
}
<input type="button" value="Search" ng-click="searcher()">
I'm trying to use Google map API in the ASR.NET mvc. I want to use DirectionsRenderer. I read the documentation about that here and trying to use the example
But this map is not render in my site. Where maybe be problem?
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false">
</script>
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(41.850033, -87.6500523)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP].push(control);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="control">
<strong>Start:</strong>
<select id="start" onchange="calcRoute();">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
</select>
<strong>End:</strong>
<select id="end" onchange="calcRoute();">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
</select>
</div>
<div id="map-canvas" style="float: left; width: 70%; height: 100%">
</div>
<div id="directions-panel" style="float: right; width: 30%; height: 100%">
</div>
</body>
make sure that you've set the right key in the script src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false" , as I've tried your code with my own key and it works.. if you want the function of calcRoute(); to be called on page load just add this line in the end of initialize function calcRoute();
I am trying to develop a chat application.I am using Asp.Net2.0 and vs2005.Iam using AjaxPro Framework for getting asynchronous calls to the server side.
My problem is when i send message im getting timeout error after a few seconds.What could be the problem and how will i resolve it?
My another doubt is that is there some serious problem in using AjaxPro Framework
Heres the code i have used in the client side to send messages
<script language="javascript">
// Send messages
function sendMessage()
{
// input box for entering message
var ta_content = el("txtcontent");
// if the content input is not empty
if (ta_content.value.length > 0)
{
//the message show area
var div_recentMsg = el("recentMsg");
var clientUname=document.getElementById("<%=hFieldClientUserName.ClientID %>").value;
var adminUname=document.getElementById("<%=hFieldAdminUserName.ClientID %>").value;
// send the message
AjaxProChat.SendMessage(clientUname,adminUname,ta_content.value);
// clear the input box
ta_content.value = "";
// roll up the web page with the messages
ta_content.scrollIntoView(false);
getNewMessage();
}
}
//Obtain the new messages
function getNewMessage()
{
// AjaxProChat.timeouPeriod(1800000);
// the user name
var username = document.getElementById("<%=hFieldClientUserName.ClientID %>").value;
// the message show area
var div_recentMsg = el("recentMsg");
// Obtain the DataTable for the newest messages
var dt = AjaxProChat.GetNewMsg(username).value;
for (var i = 0;i < dt.Rows.length;i++)
{
// one message in response to one <span> object
var oneMsg = document.createElement("span");
// the message sender and corresponding sent content
var strLine1 = dt.Rows[i].Sender + " says: (" + dt.Rows[i].SendTime + ")";
strLine1 = DealBrackets(strLine1);
// the content of the message
var strLine2 = dt.Rows[i].Contents;
strLine2 = DealBrackets(strLine2);
// show style
oneMsg.innerHTML = "<pre>" + strLine1 + "<br> " + strLine2 + "</pre>";
oneMsg.style.padding = "2px 2px 2px 2px";
oneMsg.style.color = (dt.Rows[i].Sender == username) ? "blue" : "red";
oneMsg.style.fontFamily = "'Courier New'";
// attached to DOM
div_recentMsg.appendChild(oneMsg);
}
}
</script>
Heres the html code
<div style="text-align: center">
<strong><span style="font-size: 24pt"><span style="color: #333399; background-color: #ffffff">
Chatting Room</span></span></strong>
</div>
<table border="2" style="width: 792px; height: 443px;background-color:#ffffff;">
<tr>
<td colspan="3" style="height: 373px; width: 729px;">
<div id="recentMsg" style="width: 779px; height: 368px; overflow:auto;">
</div>
</td>
</tr>
<tr>
<td colspan="3" style="height: 30px; width: 729px;">
<asp:Label ID="Label1" runat="server" Font-Size="X-Large" ForeColor="Maroon">Input the message and click Send or press ENTER key:</asp:Label>
</td>
</tr>
<tr>
<td colspan="3" style="height: 40px; width: 729px;">
<input id="txtcontent" onkeydown="if (event.keyCode==13) {sendMessage();return false;}"
style="width: 55%; height: 30px" type="text" runat="server" />
<input onclick="javascript:sendMessage();" style="width: 58px; border-top-style: groove;
border-right-style: groove; border-left-style: groove; background-color: #ebf1fa;
border-bottom-style: groove; height: 34px;" type="button" value="Send" id="btnSend" /></td>
</tr>
<tr>
<td colspan="3" style="width: 729px">
</td>
</tr>
</table>
Heres the code for sending and receving messages i have written in server side
[AjaxPro.AjaxMethod]//code for sending messages
public void SendMessage(string Sender,string Receiver,string Content)
{
ChatBAL clsChat = new ChatBAL();
clsChat.SENDER = Sender;
clsChat.RECEIVER = Receiver;
clsChat.CONTENT = Content;
clsChat.SendMessage();
}
[AjaxPro.AjaxMethod]//code for getting latest message and returns datatable
public DataTable GetNewMsg(string UserName)
{
ChatBAL clsChat = new ChatBAL();
DataTable dtNewMsg =new DataTable();
try
{
clsChat.USERNAME = UserName;
dtNewMsg = clsChat.GetNewMessage();
}
catch
{
throw;
}
finally
{
clsChat = null;
}
return dtNewMsg;
}
In your javascript code, you can use this code right before of the ajax call.
AjaxPro.timeoutPeriod = 120 * 1000; //this will add a 2 minutes timeout
AjaxPro.onTimeout = (function (time, obj, something) {
if (time < AjaxPro.timeOutPeriod || obj.method !="SendMessage") return false;
else
{
console.log("Ajaxpro timeout exception after 120 seconds!");
}
});
This is a drop down Div - which works with everything except GoogleMap.
I get half the map showing or maybe a 1/4 of it... When I get rid of the div's all works fine... Or is there a workaround without div's? Ideas... I tried declaring table, p etc... No luck...
Javascript Drop Down Code and Div calls
<script type="text/javascript">
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
</script>
<div class=catlist>
<table border=0 cellpadding=4>
<tr>
<td valign=middle><img src="images/plus.png" onclick="javascript:showElement('ed')"></td>
<td valign=middle><a href="#" onclick="javascript:showElement('ed')"><b>Edit GPS
Map</b></a></td>
</tr></table>
</div>
<div class="qlist" id="ed" style="display:none;">
<div id="map" style="width: 500px; height: 250px;"></div>
</div>
Adding the Google Javascript...
This is the actual Google Maps Javascript...
Cold Fusion Plots the # markers...
This works fine outside of divs...
Code suggested above works to display the correct map interface...
But the centering of the plot is not working...
And marker shows at top left corner with above code provided...
<div id="map" style="width: 500px; height: 250px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript">
</script>
<script type="text/javascript">
var locations = [
["#bsname#", #gpslat#, #gpslong#, #busid#],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(#gpslat#, #gpslong#),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
The changes I made were:
triggering a resize when the div is expanded
centering the map after the resize
making map and locations variables global.
The jsfiddle is here:
http://jsfiddle.net/Mgp9z/9
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
// CHANGED locations and map now global so they refer to the same thing in both initialize and showElement
var locations = [
["a", 40.2, -88.8, "k"],
];
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
// CHANGED
zoom: 10,
center: new google.maps.LatLng(40.2, -88.8),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
// *** add the trigger here ***
google.maps.event.trigger(map, 'resize');
var mylat=locations[0][1];
var mylng=locations[0][2];
map.setCenter(new google.maps.LatLng(mylat,mylng));
} else {
myLayer.style.display="none";
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class=catlist>
<table border=0 cellpadding=4>
<tr>
Lat: <input type="text" id="mylat" value="40.2">
Lng: <input type="text" id="mylng" value="-88.8">
<!-- <td valign=middle><img src="images/plus.png" onclick="javascript:showElement('ed')"></td> -->
<td valign=middle><a href="#" onclick="javascript:showElement('ed')"><b>Edit GPS
Map</b></a></td>
</tr></table>
</div>
<div class="qlist" id="ed" style="display:none;">
<div id="map" style="width: 500px; height: 250px;"></div>
</div>
</body>
</html>
Making the map resize after you show the div should work:
From the docs: "Developers should trigger this event on the map when the div changes size:" google.maps.event.trigger(map, 'resize') .
EDIT - I'll be more specific, please try again
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
// *** add the trigger here ***
google.maps.event.trigger(map, 'resize')
} else {
myLayer.style.display="none";
}
}
Demo: http://jsfiddle.net/Mgp9z/
I am trying to display google map as a tooltip using qTip jquery plugin. I have number of elements on the page and need to assign overflow: hidden to all of them. Everything works great, except for the google map tooltip does not seem to work (just shows blank map with Google logo & terms of service). I need to apply the overflow hidden to all the blocks except for the tooltip block. When I take the global overflow out, the map showup without a problem.
Am I using the CSS properties incorrectly? How can I fix this? Code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script type="text/javascript" src='jquery.qtip-1.0.0-rc3.min.js'></script>
<script type="text/javascript" src="http://maps.google.com/maps/apijs?sensor=false"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
geocoder = new google.maps.Geocoder();
jQuery('td.a').each(function(i){
jQuery(this).qtip({
content: {
text: '<div id="map_canvas_'+i+'" latlon="'+jQuery('td.a').attr('tooltip')+'" addr="'+jQuery('td.a').attr('address')+'" style="width: 450px; height: 300px"></div>'
},
show: {
delay: 500,
when: 'click',
solo: true,
effect: { type: 'grow', length: 310 }
},
hide : {
when : {
event : 'unfocus'
}
},
position: { adjust: { screen: true } },
style: {
width: 490,
height: 300,
border: {
width: 5,
radius: 10
},
padding: 10,align: 'center',
tip: true
},
api: {
onShow : function() {
var ll = jQuery('#map_canvas_'+i).attr('latlon');
var latlong = ll.split(',');
var reslonger = new google.maps.LatLng(-34.397, 150.644);
geocoder.geocode({'address':jQuery('#map_canvas_'+i).attr('addr')},function(results,status){
if (status == google.maps.GeocoderStatus.OK) {
reslonger = results[0].geometry.location;
//alert(reslonger);
var reslong = new google.maps.LatLng(latlong[0], latlong[1]);
var myOptions = {
zoom: 15,
center: reslonger,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas_'+i), myOptions);
var marker = new google.maps.Marker({
position: reslonger,
map: map,
title:jQuery('#map_canvas_'+i).attr('addr') });
}else {
alert("Geocode was not successful for the following reason: " + status);}
} );
}
}
});
});
});
</script>
<style>
div
{
overflow: hidden;
}
</style>
</head>
<body>
<table style="height: auto" border="1" cellspacing="0" cellpadding="2" width="400">
<tbody>
<tr>
<td class="a" width="100" address="92123">
92123
</td>
<td class="a" width="100" address="91910">
91910
</td>
<td class="a" width="100" tooltip="38.8921,-77.033689" address="92154">
92154
</td>
<td class="a" width="100" tooltip="38.89051,-77.086294" address="90210">
90210
</td>
</tr>
</tbody>
</table>
</body>
</html>
This must not be all your code, because you don't even have any div items in your html. However, for most modern browsers (CSS3), this css should fix your issue:
div[id^=map_canvas],
div[id^=map_canvas] div {overflow: auto;}
This will target any map_canvas generated by the script and all its child div's and set the overflow back to normal.