-1

I am trying to show on one map user's current location and other users markers whose locations I get from ajax post.

In other words I am trying to combine this https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

with this http://en.marnoto.com/2013/12/mapa-com-varios-marcadores-google-maps.html

or even the simpler version Google Maps JS API v3 - Simple Multiple Marker Example

but I don't know how to implement my data that I get from ajax. In order to get the information from ajax I have to pass the latitude and longitude so that I can get the users that are in 1km radius and who were logged in in the past 5 minutes. I have written the query, and my api is correct,I have checked that part, but I don't know how to combine the two codes in order to get one map with user's current location and other users markers.

this is my index.html file

 <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geolocation</title>
    <script src="location.js"></script>
</head><body>

    <div id="map"></div>
    <p id="geolocation"></p>
    <script>

        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 45.38361, lng: 20.38194},
                zoomControl:true,
                zoom: 15
            });
            var infoWindow = new google.maps.InfoWindow({map: map});

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    infoWindow.setPosition(pos);
                    infoWindow.setContent('You are here.');
                    map.setCenter(pos);
                }, function () {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                    'Error: The Geolocation service failed.' :
                    'Error: Your browser doesn\'t support geolocation.');
        }
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap">
    </script>
</body>

and this is my location.js file

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

function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
    var element = document.getElementById('geolocation');
    console.log(position.coords.latitude);
    console.log(position.coords.longitude);

//here is where I write in the db user's current location
    $.post("url/location", {username: localStorage.getItem("username"), latitude: position.coords.latitude, longitude: position.coords.longitude});

//here is where I get other users locations based on user's current one and in the radius of 1km 
    $.post("url/getUsers", {latitude: position.coords.latitude, longitude: position.coords.longitude})
            .done(function (data) {
                $(data).each(function (index, value) {
//here I am writing in the console the data that I receive back from the ajax call, and I presume that I should make my markers here
                    console.log(value.username + ' ' + value.latitude + ' ' + value.longitude);
                });
            });
}
function onError(error) {
    alert('code: ' + error.code + '\n' +
            'message: ' + error.message + '\n');
}
Community
  • 1
  • 1
Sandy
  • 21
  • 4
  • Do u have latitudes and longitudes in the DB?? – user1544541 Feb 17 '17 at 14:23
  • Yes, I am getting the latitude and longitude of the current user's location and with post and ajax I am putting it in DB. My next step was to have another api to post the same latitude and longitude to get the other user's locations that are in radius of 1km and in the last 5 minutes so that the location is up to date. I have written the result in console.log and it works, I am getting the right data back.. I am just having trouble figuring out how to place those markers on map.. – Sandy Feb 17 '17 at 14:27
  • OK, I'll guide you in few minutes. I have implemented it. Thanks. – user1544541 Feb 17 '17 at 14:29
  • Thank you so much! I have been working on this for three days now, but no success :( – Sandy Feb 17 '17 at 14:35
  • Are you to add a single marker on the map? Also, can you send me an array of the latitudes and longitudes you are getting from DB? Thanks. – user1544541 Feb 17 '17 at 15:04
  • Are you there?? – user1544541 Feb 17 '17 at 15:25
  • I am building a mobile app for students. The idea is that when they click on the map button on the app, they will be able to see a map where they are(their current position) and where other students who are logged into the app are(multiple markers) in a 1km radius. In my db table I have the username, datetime and latitude and longitude written. I have edited the question so that you can see what I am returning.. – Sandy Feb 18 '17 at 17:26

1 Answers1

1
    for (i = 0; i < jsonArray.locations.length; i++)   
    {
    var counter = jsonArray.locations[i];         
    var infowindow = new google.maps.InfoWindow();

    marker = new google.maps.Marker({
    position: new google.maps.LatLng(counter['lat'], counter['lon']),
    map: map,
    icon:'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+i+'|FF0000|000000'
    });

    }
user1544541
  • 193
  • 3