Search code examples
google-mapsjquery-mobilegoogle-maps-api-3

Google Maps v3 jquery mobile get center latitude and longitude


I'm trying to draw markers on the map after a map has been initialised. However I need to know the central point lng lats.

I've tried using both of these however I'm getting "Uncaught RangeError: Maximum call stack size exceeded" in chrome js;

$('#map_canvas').gmap('get', 'map').getCenter()); and also 
$('#map_canvas').gmap('option', 'center');

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="jquery-ui-map-3.0-rc/ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="jquery-ui-map-3.0-rc/ui/jquery.ui.map.extensions.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

<script>
$('#map_page').live("pageshow", function() {
    function add_markers() {
        var location = $('#map_canvas').gmap('option', 'center');
    $.getJSON( 'http://localhost/motherly/android/index.php/api/venues?lat=' + location.lat() + '&lng=' + location.lng(), function(data) { 

        console.log(data['response']);

        $.each(data.response, function(i, marker) {
            // console.log(marker.lat, marker.lng);
            $('#map_canvas').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.lat, marker.lng), 
                'bounds': true 
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 'content': marker.name }, this);
            });
        });
    }); 
    }

    function initialize(lat,lng) {
        $('#map_canvas').gmap({'center' : new google.maps.LatLng(lat, lng), 'callback': function(){
            add_markers();
        }});
    }

    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position){
            console.log(position);
            initialize(position.coords.latitude,position.coords.longitude);
            // google.maps.event
        });
    }
});

Solution

  • Apologies chaps I realised the issue was that I'm calling the draw method inside the constructor for the map which makes sense that the map object isn't initialised.

    So to recap the issue is the add_markers() method being inside of this constructor (move the add_markers() below this line);

    $('#map_canvas').gmap({'center' : new google.maps.LatLng(lat, lng), 'callback': function(){
    
    }});