CODEWITHSUNDEEP
google-mapsjquery-mobile
Mazzy
Mazzy

Reputation: 14179

geolocation function in jquery mobile

I have this html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>

  <meta name="description" content="" />
  <meta name="author" content="Salvatore Mazzarino" />

  <meta name="viewport" content="width=device-width; initial-scale=1.0" />

  <!-- jquery mobile scripts -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-   1.0.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

  <!-- my own style sheet -->
  <link rel="stylesheet" href="./assets/css/style.css" type="text/css" />

  <!-- google maps api script -->
  <script type="text/javascript" src="./includes/js_map.js"></script>
  <script src="http://maps.google.com/maps/api/jssensor=false"></script>
</head>

<body>

    <div data-role = "page" id = "map-page">
        <div data-role = "header">
            <h1>Your position</h1>
        </div>

        <div data-role = "content" id = "map-canvas">
            <!-- here the map -->
        </div>
    </div>

 </body>
</html>

and this js file :

     $( "#map-page" ).live( "pageinit", function() 
                               {

// Default to Via Messina,Catania,IT when no geolocation support
var defaultLatLng = new google.maps.LatLng(37.530073, 15.112151);

if ( navigator.geolocation ) 
{

    function success(pos) 
    {

        // Location found, show coordinates on map
        drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
    }

    function fail() 
    {

        drawMap(defaultLatLng); // Show default map
    }

    // Find users current position
    navigator.geolocation.getCurrentPosition(success, fail, {enableHighAccuracy:true, timeout: 6000, maximumAge: 500000});

 } 
 else 
 {
    drawMap(defaultLatLng); // No geolocation support
 }

function drawMap(latlng) {

        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(
        document.getElementById("map-canvas"), myOptions);
        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "Greetings!"
        });
}
});

I'm trying to obtain my position.in the html page a mas should appears but nothing apper neither the default map. why? any idea?

Upvotes: 0

Views: 1726

Answers (1)

andresf
andresf

Reputation: 2061

Without seeing your live code, it's hard to see if any of the CSS might be causing display issues. However, there are at least two things that need to be fixed:

  1. Your call to the Google Maps API needs to be moved above your own JS file (in the head of the document).

  2. You have an error in your URL that references the Maps API JS file. Change it from:

http://maps.google.com/maps/api/jssensor=false

to:

http://maps.google.com/maps/api/js?sensor=false

I was able to get the map to load and show a marker in the middle of the map.

Upvotes: 1

Related Questions