CODEWITHSUNDEEP
javascriptgoogle-maps
user3527333
user3527333

Reputation: 49

passing latitude and longitude to google maps. Need someone to help me correct my code

I tried this following method to pass lat and lon to google maps so that I should be able to open the map and find my current location on the map. when i run this code, only google map symbols appear and no map. 

var lat= function latitu(){
document.addEventListener("deviceready", onDeviceReady, false);

// Cordova is ready
//
function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
     var element = '' +  position.coords.latitude + '' ;

}

// onError Callback receives a PositionError object
//
function onError(error) {
    alert('code: '    + error.code    + '\n' +
          'message: ' + error.message + '\n');
}
}
var lon = function longitu(){
document.addEventListener("deviceready", onDeviceReady, false);

// Cordova is ready
//
function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
     var element= '' +  position.coords.longitude + '' ;

}

// onError Callback receives a PositionError object
//
function onError(error) {
    alert('code: '    + error.code    + '\n' +
          'message: ' + error.message + '\n');
}
}
var map;
  function initialize() {
    var mapDiv = document.getElementById('map-canvas');
    map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(lat,lon ),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);

  }

  function addMarkers() {
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();

      var latLng = new google.maps.LatLng(lat,lon);
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });

  }



  google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 1

Views: 1036

Answers (1)

Guffa
Guffa

Reputation: 700222

The reason that you don't get a map is because there are no center coordinates. The lat and lon variables doesn't contain latitude and longitude, they contain function references for functions that would fetch the coordinates. As the functions are never called, there are no coordinates.

That can't simply be fixed by calling the functions, as the functions doesn't return the coordinates, they just start the process of getting the coordinates and returns immediately with a return value of undefined. Once the success callback is called, the coordinates are put in a variable and forgotten.

You should first get the coordinates, and when they arrive you can start setting up the map. Your current code is waiting for the deviceready event to get the coordinates (or it would have if the functions were called), and waiting for the load event to set up the map. As you don't know when the events happen, you could set up the map before there are any coordinates. Call the function that sets up the map once the coordinates arrive, and in that function you can check if the element is loaded or not, and use the load event if needed.

You have twoo functions for getting the coordinates, but you don't need to get the latitude and longitude separately.

This code works for getting the coordinates, then setting up the map:

document.addEventListener("deviceready", onDeviceReady, false);

// Cordova is ready
//
function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}

function onSuccess(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    initialize(lat, lon);
}

// onError Callback receives a PositionError object
//
function onError(error) {
    alert('code: ' + error.code + '\n' +
        'message: ' + error.message + '\n');
}

var map;

function initialize(lat, lon) {
    var mapDiv = document.getElementById('map-canvas');

    // check if the element exists
    if (mapDiv == null) {
        // if not, wait until it does
        google.maps.event.addDomListener(window, 'load', function(){
            initialize(lat, lon);
        });
    } else {

        map = new google.maps.Map(mapDiv, {
            center: new google.maps.LatLng(lat, lon),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
            addMarkers(lat, lon);
        });

    }
}

function addMarkers(lat, lon) {
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();

    var latLng = new google.maps.LatLng(lat, lon);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });
}

Demo (without the devideready event): http://jsfiddle.net/Guffa/bTP2a/

Upvotes: 1

Related Questions