Help with the google maps api

Asked

Viewed 702 times

2

I am a beginner in HTML and PHP, I would like to know how I can via google maps API make my site a similar routine to the site mapeia.com.br, where I receive the mileage and time information of a route informed by the user.

google-maps

  • Take a look at Distance Matrix Service https://developers.google.com/maps/documentation/javascript/distancematrix?hl=pt-br

1 answer

1

Simple answer: Too much PHP (or the server language of your choice), too much javascript, too much documentation reading and a bit of HTML

Not so simple answer: This will require some of your creativity. The google API gives you a support for you to use in your applications, it doesn’t give you the solution ready. I recommend doing several tests of documentation (study even, as if it were chapter by chapter), test various models of maps, make changes. There are the codes. Another way to get inspired is to know what other developers are doing with the Google Maps API. In this link has an excellent repository on github with several examples ready for you to test in your search. What you might be going to twist your nose at, is that beginners (as you say it is) may not have as much intimacy with databases. If this is the case, I recommend studying JSON standard file reading, studying the function json_decode PHP, and also study the function fwrite file writing. Later you can make this JSON reading from a database (it is possible). Before you start with the most ingenious part, you can simply pass GET parameters in the url to test a dynamism.

Example of using the json_decode function:

<?php
$arquivo = "teste.json"; // Sempre colocar caminho completo para possível saída HTTP. Configurar token.php para evitar acessos indevidos. 
$info    = file_get_contents($arquivo);
$lendo   = json_decode($info);
foreach ($lendo->dados as $reg) {
                echo "<b>id:</b> " . $reg->id."<br>";
                echo "<br /><b>categoria:</b> " . $reg->Categoria."<br>";
                echo "<br /><b>titulo:</b> " . $reg->titulo ."<br>";
}

?>

JSON file used

{
    "dados":[ {
        "id": "1", "Categoria": "Blog", "titulo": "Minha postagem"
    }
    ,
    {
        "Id": "0", "Categoria": "00000", "Titulo": "000000"
    }
    ]
}

Example of a map receiving data via PHP URL

<?php
$pegaLatitude = $_GET['lat]';
$pegaLongitude = $_GET['lng]';

?>
    <!DOCTYPE html>
    <html>
      <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
          /* Always set the map height explicitly to define the size of the div
           * element that contains the map. */
          #map {
            height: 100%;
          }
          /* Optional: Makes the sample page fill the window. */
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>
      </head>
      <body>
        <div id="map"></div>
        <script>
          var map;
          function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: <?php echo $pegaLatidude; ?>, lng: <?php echo $pegaLongitude; ?>},
              zoom: 8
            });
          }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
        async defer></script>
      </body>
    </html>

Conclusion: The Google Maps API offers only the service of map handling. The developer’s role is to deliver market. Study, but don’t be a "wiker", be a developer. Create systems, solutions. And mainly, try not to associate as directly its ability to solve problems to only limits knowledge. In large part of the developer routine is to use knowledge resources of other developers, using Apis, libraries and frameworks. So do not be afraid in search/ask/etc. And don’t forget to get your developer key for your maps to work. More explanations on this link

Browser other questions tagged google-maps

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