Hi,
i need to implement google map in my application.i am using mvc4 (.net) jquery 1.8.3
here is my code
<script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.mobile-1.1.0.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/jquery.mobile-1.1.0.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Kendo/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Kendo/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/Kendo/kendo.all.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/myIns.css")" rel="stylesheet" type="text/css" />
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
})
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script language="javascript" type="text/javascript">
var directionsDisplay;
var latitude; var langitude;
function success(position) {
debugger
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
latitude = position.coords.latitude;
langitude = position.coords.longitude;
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 10,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "You are here!"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
}
</script>
<script type="text/javascript">
function mapp() {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var start = latitude + "," + langitude;
var end = document.getElementById('endvalue').value;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
// directionsDisplay.setPanel(document.getElementById('panel'));
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);
}
});
}
function getdirection() {
mapp();
}
</script>
<div id="example" style="width: 100%; margin-left: 49px;">
<div>
<table id="control" style="width:100%">
<tr>
@*<td style="width: 25px">@Html.Label("From:", new { Style = "color:black" })
</td>
<td>@Html.TextBox("startvalue", "", new { id = "startvalue", Style = "width:200px;" })
</td>*@
</tr>
<tr>
<td style="width: 25px">
@Html.Label("To:", new { Style = "color:black" })
</td>
<td>
@Html.TextBox("endvalue", "", new { id = "endvalue", Style = "" })
</td>
</tr>
<tr>
<td>
</td>
<td>
<input id="Button1" type="button" value="GetDirections" onclick="getdirection()" />
</td>
</tr>
</table>
</div>
</div>
i am not getting the google map can u suggest any solutions?