Google Maps API - Hulp gezocht

16 okt 2016, 21:55

Beste UB'ers,

Zijn er mensen die goed overweg kunnen met de API van Google Maps hier, en die bereid zijn om me te helpen met een probleem?
Enige tijd geleden heb ik alle UBA (Unie der Belgische Amateurzenders) secties eens uitgezet op een Google Maps kaart (https://www.mapcustomizer.com/map/UBA%20secties). Maar daar deze site de laatste tijd erg veel uitval kent zou ik deze graag zelf hosten op mn eigen server, indien mogelijk met de volgende "eisen":
1. de kaart mag het browserscherm volledig in beslag nemen
2. nu staan er overal nummertjes die verwijzen naar het nummer aan de rechterkant. De nummertjes uit de rode markers mogen volledig weg, gewoon een blanco marker is OK.
3. Bij het klikken op de marker moet het adres er niet op. De 3 letters van de sectie + de callsign alleen is prima

Iemand die me enige hulp kan bieden? Via Mapscustomizer.com kon ik dit vrij simpel maken, maar helaas geen ervaring met de API.

Bedankt!

butskristof · 16 okt 2016, 22:13

Vorig jaar wel eens mee bezig gehouden voor implementatie in ons eindproject.

Ik probeer een dezer dagen een poging te doen. Heb je toevallig de lijst in een ander formaat? txt of csv of zo? iets handiger dan ze allemaal te gaan liggen kopiëren van de website.

16 okt 2016, 22:17

Dag Kristof,
Helaas, dat heb ik niet. Ik heb ze ook allemaal gekopieerd van de website van de UBA zelf (http://uba.be/nl/contact/uba-secties). Maar als je er bvb één of twee op wilt zetten kan kan ik - in de html code - de rest wel toevoegen.
Ben zelf een ramp in code schrijven, maar meestal lukt het wel om bepaalde zaken uit de voorbeeld code te bekijken en aan te passen.

butskristof · 16 okt 2016, 22:31

Okay, had handig geweest als ik ze ergens via JSON had kunnen inlezen.
Ik probeer het morgen te bekijken!

16 okt 2016, 22:32

Bedankt Kristof!

23 okt 2016, 16:14

Hey Kristof, heb jij hier aub al ns naar kunnen kijken?

Groetjes
Kris

gerree · 23 nov 2016, 20:56

Heb je mymaps van google al eens bekeken?

29 nov 2016, 11:33

Nog niet bekeken, daar het de bedoeling is dat we dit zelf hosten. Willen niet dat het ergens extern staat.

raf1 · 29 nov 2016, 18:04

Een Google Account en een API-key zijn de eerste stap.
Dit is ongeveer wat je wil doen: https://developers.google.com/maps/docu ... google-map

Het is in feite niet zo heel moeilijk om één marker op een kaartje te zetten.

Meerdere markers op een Google Map zetten is iets moeilijker, maar daar kan ik je bij helpen.

De eerste stap is alle nodige data(adressen, callsigns en sectienamen) in een Excel-bestand steken en converteren naar JSON: https://convertexcel.net/excel-to-json

Als je dat al kunt, wil ik gerust eens een stukje code posten die zo'n json via markers netjes op de kaart van België toont.

raro11 · 29 nov 2016, 20:39

De json kunnen we halen uit de pagina.
Heb ze op pastebin gezet:

Edit: Heb het dan maar snel voor de lol eens zelf geprobeerd.

Je gaat wel de APIkey moeten vervangen. Kga die na een week verwijderen.

raf1 · 29 nov 2016, 21:33

Ik had ook nog een stukje code staan, is inderdaad in een handomdraai gemaakt als je een kant-en-klare json hebt:

Code: Selecteer alles

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
          var map = new google.maps.Map(document.getElementById('map'));
          var geocoder = new google.maps.Geocoder();
          var infowindow = new google.maps.InfoWindow();

          //location of json file
          var jsonurl = 'uba.json';

          //set country
          var country = "Belgium";

          //center and zoom map to country
          geocoder.geocode({'address': country}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                  map.setCenter(results[0].geometry.location);
                  map.fitBounds(results[0].geometry.bounds);
              }
          });

          //load JSON
          loadJSON(jsonurl, function(response) {
            // Parse JSON string into object
            var myjson = JSON.parse(response);
            //geocode all adressses and add markers
            for (var item in myjson.points) {
              createMarker(myjson.points[item], myjson.points[item].loc)
            }
          });

          function createMarker(data, location) {
              var marker = new google.maps.Marker({
                  position: location,
                  map: map,
              });
              google.maps.event.addListener(marker, 'click', function() {
                  infowindow.setContent(data.description);
                  infowindow.open(map, marker);
              });
          }
          
          function loadJSON(url, callback) {   
            var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
            xobj.open('GET', url, true);
            xobj.onreadystatechange = function () {
              if (xobj.readyState == 4 && xobj.status == "200") {
                callback(xobj.responseText);
              }
            };
            xobj.send(null);
          }
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

30 nov 2016, 00:09

Morgen hier eens verder naar kijken, dank!