-1

I have a a small application where I am constantly downloading geocoordinates from database through and showing in the map and at the same time, upload geolocation coordinates as well. I have written the code and data is being uploaded and downloaded perfectly fine. But the map itself doesnt display at all. Here is my code:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en&key=MY-API-KEY" async defer></script>

<script>


if ("geolocation" in navigator) 
{
    request_location();

} 

// Requesting location from user
function request_location()
{
    // Will repeat the process in two minutes
    setTimeout(request_location, 500 * 1000);

    // Get location info from browser and pass it to updating function
    navigator.geolocation.getCurrentPosition(update_location);
}

// Sending location to server via POST request
function update_location(position)
{
    // For simplicity of example we'll 
    // send POST AJAX request with jQuery
    $.post( "functions.php?action=update_geolocation", { latitude: position.coords.latitude, longitude: position.coords.longitude });



}

function updatemap(lat_coordinates, long_coordinates)
{


        var map = new google.maps.Map(document.getElementById('mapholder'), 
            {
            zoom: 4,
                center: {lat: lat_coordinates, lng: long_coordinates},
        });

        var marker = new google.maps.Marker({
            position: {lat: lat_coordinates, lng: long_coordinates},
                map: map,
                title: 'Hello World!'
                    });

 }


setInterval(function update_map(){

        jQuery.ajax({
            url: "http://dev.radiumenterprises.co.uk/viitgo/provider/rest.php/geolocation",
            type: "GET",

            contentType: 'application/json; charset=utf-8',
            success: function(resultData) {

                            console.log(resultData);
                            console.log(resultData.latitude);
                            console.log(resultData.longitude);

                            var lat_coordinates = parseFloat(resultData.latitude)
                            var long_coordinates = parseFloat(resultData.longitude)

                            updatemap(lat_coordinates, long_coordinates); 


            },
            error : function(jqXHR, textStatus, errorThrown) {
            },

        });

    }, 3000);

    </script>
    <div style="height:100%; width:100%;">
    <div style="margin: 0;padding: 0;height: 100%;" id="mapholder"></div>
    </div>

Does anyone see where I am going wrong, the only problem I am having is that map itself is not displaying. I have tried many solution but cant figure out whats causing it. Any suggestions will be highly appreciated. Thanks in advance.

Daniel
  • 269
  • 6
  • 16
  • possible duplicate of [Google Maps API v3 | shows no map data](http://stackoverflow.com/questions/18273430/google-maps-api-v3-shows-no-map-data). Your map doesn't have a size. You need to add (at least) these css rules: `html, body { height: 100%; width: 100%; }`. [fiddle](http://jsfiddle.net/geocodezip/ru4a0sej/) – geocodezip Apr 17 '16 at 15:12

2 Answers2

0

It seems like your request to /rest.php/geolocation is timing out and therefore updatemap is never called.

If the request is working for you then check the dimension of your mapholder div. It seems to be having 0 height.

user4617883
  • 1,277
  • 1
  • 11
  • 21
  • @user4517883 It is doing now because my webpage is offline but when my webpage was online, i did console log and coordinates printed out correctly. I assure you that problem is something else. –  Apr 17 '16 at 08:26
  • As you can see, height is 100%, please advise –  Apr 17 '16 at 08:27
  • Try giving the parent of mapholder an absolute position. Right now both divs have 0px height. – user4617883 Apr 17 '16 at 08:35
  • Thankyou! @user4617883 I have another question regarding google maps but don't seem to be getting any answer. Can you please check it out: http://stackoverflow.com/questions/36674337/how-to-display-updated-coordinates-when-dragging-marker-on-the-map-in-google-map –  Apr 17 '16 at 09:01
  • OK I will take a look. BTW, you still have the full url in your question. – user4617883 Apr 17 '16 at 09:43
0

Your js code for rendering map seems to be right.

Check for the lat_coordinates, lng_coordinates served is proper.

Also try adding the js writing inside $(document).ready(function() {}) or make sure the js is rendered after the html code.

It might be possible when the js is rendered the DOM element is not available.

Prashant Nair
  • 306
  • 3
  • 9
  • the js is being rendered perfeclty fine, i checked using console.log() . The error is simply that the map is not displaying. –  Apr 17 '16 at 09:56