How to make the Google map dynamic

Asked

Viewed 1,203 times

-1

I’m creating a car tracking app and I’m having a problem, I’m trying to get the map to update dynamically without the need to keep updating the page manually, this page gets the location through a file. json in the code I’m calling a file, but the information will come through a Web Service where it receives location information through GPS, someone would have idea how to leave this dynamic page?

Como seria a pagina de monitoramento

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/normalize.css">
  <link rel="stylesheet" type="text/css" href="css/result-light.css">
  <style type="text/css">
    #map_canvas { width: 1000px; height: 600px; }

  </style>

  <title></title>
  <script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var gMapsLoaded = false;
window.gMapsCallback = function(){
    gMapsLoaded = true;
    $(window).trigger('gMapsLoaded');
}
window.loadGoogleMaps = function(){
    if(gMapsLoaded) return window.gMapsCallback();
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}

$(document).ready(function(){
    function initialize(){
        //Aqui cria a varivel para o mapa
        var myLatLng = {lat: -23.001066, lng: -43.421180};
        var pos = {lat: -23.001271, lng: -43.329061};

        var image = 'img/car2.png';


        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(-23.001066, -43.421180),  //-23.001066, -43.421180
            mapTypeId: google.maps.MapTypeId.ROADMAP};
        map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);  
             $.getJSON('igreja.json', function(data) { //igreja.json //endereco1.json
                  //var output="<ul>";

                  var mark;
                  var infowindow = new google.maps.InfoWindow;

                  for (var i in data) {
                     mark = new google.maps.Marker({
                           position: new google.maps.LatLng(data[i].latitude, data[i].longitude),
                           map: map,
                           icon: image
                      });

                     mark.addListener('click', function() {
                      map.setZoom(15);
                      map.setCenter(mark.getPosition());

                       infowindow.setContent(data[i].nome);//data[i].latitude, data[i].longitude
                      infowindow.open(map, mark);
                    });

                  }
            });
    }

    $(window).bind('gMapsLoaded', initialize);
    window.loadGoogleMaps();
});
});//]]> 

</script>
</head>
<body>
  <div id="map_canvas"></div>
<div id="debug"></div>
</body>
html ajax json web-service google-maps
  • 1

    Considered calling the initialize() several times with setInterval, will only need to clean the markers each time you enter this function

  • Jhonatan, this is the right way to do it or have another way?

  • To take a closer look, I needed the content of igreja.json could better assess and understand the context.

  • This is json: [ { "name":"Abound", "latitude":"-23.001075", "longitude":"-43.421170" }, { "name":"South bar", "latitude":"-23.005563", "longitude":"-43.430661" } } ]

  • Mano I made a joke and it worked... look at this: http://credlocaliza.com.br/system/teste.php. , of course the movement of the pointer is not sequential in a street, but it changes randomly. I used setInterval every 3 seconds, but you can increase it

  • it was very good that even I need, you could pass me the example code you used?

  • I’ll pass yes... I changed your code a little to work for me...

Show 2 more comments

1 answer

2


Follows code:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->
    <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="https://maps.google.com/maps/api/js?sensor=false"></script>

    <style type="text/css">
        .map_canvas {
            width: 1000px;
            height: 600px;
        }
    </style>

</head>

<body>

    <div class="contexto_canvas">
        <div class="map_canvas"></div>
    </div>

    <div id="debug"></div>

    <script type="text/javascript">

        function initialize(){
            //Aqui cria a varivel para o mapa
            var myLatLng = {lat: -23.001066, lng: -43.421180};
            var pos = {lat: -23.001271, lng: -43.329061};

            var image = 'https://www.iconfinder.com/icons/285810/auto_automobile_car_sedan_vehicle_icon#size=64';

            var mapOptions = {
                zoom: 15,
                center: new google.maps.LatLng(-23.001066, -43.421300),  //-23.001066, -43.421180
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var div_canvas = document.createElement("div");
            div_canvas.setAttribute("class", "map_canvas");
            $(".contexto_canvas").append(div_canvas);

            map = new google.maps.Map(div_canvas,mapOptions);  

            $.getJSON('igreja.json', function(data) {
                // Codigo para não usar cache do servidor
                $.ajaxSetup({ cache: false});
                var mark;
                var infowindow = new google.maps.InfoWindow;

                for (var i in data) {
                    console.log(data[i]);
                    mark = new google.maps.Marker({
                    position: new google.maps.LatLng(data[i].latitude, data[i].longitude),
                        map: map,
                        title: data[i].nome
                    });
                }
            });

            $($(".map_canvas")[0]).remove();
        }

        $(document).ready(function(){
            $.ajaxSetup({ cache: false});
            initialize();
            // Código para executar a cada 3000 milisegundos
            setInterval( initialize, 3000);
        });

    </script>

  • Thank you very much Jhonatan will help me a lot.

Browser other questions tagged html ajax json web-service google-maps

You are not signed in. Login or sign up in order to post.