ASP.NET MVC 2 and Google Maps Javascript API Version 3 -


Either way I used to work with Google Maps Javascript API V3 in an asp.net MVC 2 application Can not get the map. I have tried the following:

Site. Mister:

deleted

  & lt ;! DOCTYPE HTML Public "- // W3C // DTD XHTML 1.0 Strongly //n" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

Added

  & lt ;! DOCTYPE html & gt;  

It & lt; Head>

  & lt; Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "http://maps.google.com/maps/api/js?sensor=false" & gt; & Lt; / Script & gt; & Lt; Style type = "text / css" & gt; Html {height: 100%} body {height: 100%; Margin: 0 px; Padding: 0px} #map_canvas {height: 100%} & lt; / Style & gt; & Lt; Script type = "text / javascript" & gt; $ (Function () {var myLatlng = new google.maps.LatLng (-34.397, 150.644); var myOptions = {zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP} var map = new Google map Map (document.getElementById ("map_canvas"), myOptions);});  

view \ home \ index.aspx , it was added to a content placeholder

  & lt; Div id = "map_canvas" & gt; & Lt; / Div & gt;  

Am I missing something?

This is a CSS issue somehow. When Google Map maps_canvas creates a map, then it sets the position: Relative CSS style on it. Due to a reason that is causing a problem with the default master file in MVC2.

If you remove all the items from the main site of the default site. And just because the main content section is shown below it works well.

  & lt;% @ Master language = "C #" Inheritance = "System.Web.Mvc.ViewMasterPage"%> & Lt ;! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Stronger // N" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> & Lt; Html xmlns = "http://www.w3.org/1999/xhtml" & gt; & Lt; Head runat = "server" & gt; & Lt; Title & gt; & Lt; Asp: ContentPlaceHolder ID = "TitleContent" runat = "server" /> & Lt; / Heading & gt; & Lt; Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "http://maps.google.com/maps/api/js?sensor=false" & gt; & Lt; / Script & gt; & Lt; Style type = "text / css" & gt; Html {height: 100%} body {height: 100%; Margin: 0 px; Padding: 0px} #map_canvas {height: 100%} & lt; / Style & gt; & Lt; Script type = "text / javascript" & gt; $ (Function () {var myLatlng = new google.maps.LatLng (-34.397, 150.644); var myOptions = {zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP} var map = new Google map Map (document.getElementById ("map_canvas"), myOptions);}); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Asp: ContentPlaceHolder id = "main content" run = "server" /> & Lt; / Body & gt; & Lt; / Html & gt; In addition, if you are still using that using Firebug with the template you can see that when you close the position: relative to the map_canvas element it shows. 

So hopefully at least you are going in the right direction.


Comments

Popular posts from this blog

c# - sqlDecimal to decimal clr stored procedure Unable to cast object of type 'System.Data.SqlTypes.SqlDecimal' to type 'System.IConvertible' -

Calling GetGUIThreadInfo from Outlook VBA -

Obfuscating Python code? -