How to make the Google map dynamic

Question

How to make the Google map dynamic

Navigation

#1 by (2 votes)

0

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

<metahttp-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>--><scriptsrc="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

asked by anonymous 29.12.2015 / 19:44

1 answer

Join with the same table more than once How to do a checkbox ternary check with PHP?

score 2 · Accepted Answer

Follow the code below:

<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>--><scriptsrc="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="https://maps.google.com/maps/api/js?sensor=false"></script><styletype="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>