Note that there are some explanatory texts on larger screens.

plurals
  1. POdisplaying google maps with html5 geolocation in mvc3?
    text
    copied!<p>im trying to display google maps using html5 geolocation, the code is working fine is jsfiddle but in my mvc application, the map is not being displayed..posting the code below.. this is the link <a href="http://jsfiddle.net/PhzsR/62/" rel="nofollow">http://jsfiddle.net/PhzsR/62/</a></p> <pre><code>@{ ViewBag.Title = "Home Page"; } &lt;h2&gt;@ViewBag.Message&lt;/h2&gt; &lt;div id="results"&gt;&lt;/div&gt; &lt;div id="map"&gt;&lt;/div&gt; &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var $message_area = jQuery('#results'); jQuery(document).ready(function () { $message_area.html('&lt;i&gt;Locating you...&lt;/i&gt; '); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function foundLocation(position) { $message_area.children().remove(); var latitude = position.coords.latitude; var longitude = position.coords.longitude; var accuracy = position.coords.accuracy; var map; var centerPosition = new google.maps.LatLng(latitude, longitude); var options = { zoom: 12, center: centerPosition, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map($('#map')[0], options); var marker = new google.maps.Marker({ position: centerPosition, map: map, icon: 'http://google-maps-icons.googlecode.com/files/sailboat-tourism.png' }); var circle = new google.maps.Circle({ center: centerPosition, radius: accuracy, map: map, fillColor: '#0000FF', fillOpacity: 0.5, strokeColor: '#0000FF', strokeOpacity: 1.0 }); map.fitBounds(circle.getBounds()); $message_area.append('Your latitude: ' + latitude + ' and longitude: ' + longitude + ' and accuracy: ' + accuracy + ':') }, function (error) { switch (error.code) { case error.TIMEOUT: $message_area.append('Timeout error while finding your location'); break; case error.POSITION_UNAVAILABLE: $message_area.append('Position unavailable error while finding your location'); break; case error.PERMISSION_DENIED: $message_area.append('Permission denied error while finding your location'); break; case error.UNKNOWN_ERROR: $message_area.append('Unknown error while finding your location'); break; } }); } }); &lt;/script&gt; </code></pre> <p>do i need to add any reference for displaying google maps?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload