function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
</body>
</html>
In the home controller index view put the following (notice i changed the link to an action link):
<div data-role="page">
<div data-role="header"><h1>Main Page</h1></div>
<div data-role="content">
<p>
@Html.ActionLink("Map","Map","Home")
</p>
</div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
initialize(position.coords.latitude,position.coords.longitude);
});
}
});
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
In the home controller create an action named "Map" and build a view for it. In the view put the following: <div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;"> <div data-role="header"><h1>Map Page</h1></div> <div data-role="content" style="width:100%; height:100%; padding:0;"> <div id="map_canvas" style="width:100%; height:100%;"></div> </div> </div>
zionz
0 Points
14 Posts
Default MVC project with google map
Apr 14, 2012 11:40 AM|LINK
Hi,
This code (2 files) works fine itself, but I would like to embed it in MVC default project.
How the code can be devided into project pages (Index.chtml, _Layout.cshtml etc.)?
index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Main Page</h1></div>
<div data-role="content"><p><a href="map.html">Map</a></p></div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
initialize(position.coords.latitude,position.coords.longitude);
});
}
});
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
</body>
</html>
Map.html
<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>
CodeHobo
All-Star
18647 Points
2647 Posts
Re: Default MVC project with google map
Apr 14, 2012 04:42 PM|LINK
Put the following in your layout file
In the home controller index view put the following (notice i changed the link to an action link):
<div data-role="page"> <div data-role="header"><h1>Main Page</h1></div> <div data-role="content"> <p> @Html.ActionLink("Map","Map","Home") </p> </div> </div> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> // When map page opens get location and display map $('.page-map').live("pagecreate", function() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position){ initialize(position.coords.latitude,position.coords.longitude); }); } }); function initialize(lat,lng) { var latlng = new google.maps.LatLng(lat, lng); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); } </script>In the home controller create an action named "Map" and build a view for it. In the view put the following:
<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>
Blog | Twitter : @Hattan
zionz
0 Points
14 Posts
Re: Default MVC project with google map
Apr 14, 2012 05:44 PM|LINK
hi,
Thank you for reply.
Unfortunetly, map view remains gray and I can't see the map.
I put alert message after: $('.page-map').live("pagecreate", function () but the message is not fired.
any idea?
ignatandrei
All-Star
135184 Points
21682 Posts
Moderator
MVP
Re: Default MVC project with google map
Apr 14, 2012 06:58 PM|LINK
See javascrip errors( enable show errors in IE)
MasterV23
Member
113 Points
318 Posts
Re: Default MVC project with google map
Apr 16, 2012 02:19 AM|LINK
Young Yang -...
All-Star
21343 Points
1818 Posts
Microsoft
Re: Default MVC project with google map
Apr 16, 2012 04:00 AM|LINK
Hi
Did you get any error messages? If yes, please post it to us.
Regards
Young Yang
Feedback to us
Develop and promote your apps in Windows Store
zionz
0 Points
14 Posts
Re: Default MVC project with google map
Apr 16, 2012 04:33 PM|LINK
Thank you all.
Delete the following lines solved the problem.
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" /> <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>