Google Maps API - Hulp gezocht

Alles over programmeren en development binnen de IT-wereld
Plaats reactie
Gebruikersavatar
krisken
userbase crew
userbase crew
Berichten: 19763
Lid geworden op: 07 nov 2006, 12:11
Twitter: kriskenbe
Locatie: Massemen - 91WET0
Uitgedeelde bedankjes: 1857 keer
Bedankt: 1035 keer

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!

Internet = Orange 150/15Mbps + WirelessBelgië
Telefonie = EDPnet + OVH
GSM = Orange Go Extreme SE + Scarlet Red
TV = TVV App + Netflix + Disney+ + Streamz
Netwerk = Mikrotik + Ubiquiti
butskristof
Elite Poster
Elite Poster
Berichten: 1512
Lid geworden op: 19 dec 2011, 18:42
Locatie: Heist-op-den-Berg
Uitgedeelde bedankjes: 478 keer
Bedankt: 110 keer

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.
Gebruikersavatar
krisken
userbase crew
userbase crew
Berichten: 19763
Lid geworden op: 07 nov 2006, 12:11
Twitter: kriskenbe
Locatie: Massemen - 91WET0
Uitgedeelde bedankjes: 1857 keer
Bedankt: 1035 keer

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.

Internet = Orange 150/15Mbps + WirelessBelgië
Telefonie = EDPnet + OVH
GSM = Orange Go Extreme SE + Scarlet Red
TV = TVV App + Netflix + Disney+ + Streamz
Netwerk = Mikrotik + Ubiquiti
butskristof
Elite Poster
Elite Poster
Berichten: 1512
Lid geworden op: 19 dec 2011, 18:42
Locatie: Heist-op-den-Berg
Uitgedeelde bedankjes: 478 keer
Bedankt: 110 keer

Okay, had handig geweest als ik ze ergens via JSON had kunnen inlezen.
Ik probeer het morgen te bekijken!
Gebruikersavatar
krisken
userbase crew
userbase crew
Berichten: 19763
Lid geworden op: 07 nov 2006, 12:11
Twitter: kriskenbe
Locatie: Massemen - 91WET0
Uitgedeelde bedankjes: 1857 keer
Bedankt: 1035 keer

Bedankt Kristof!

Internet = Orange 150/15Mbps + WirelessBelgië
Telefonie = EDPnet + OVH
GSM = Orange Go Extreme SE + Scarlet Red
TV = TVV App + Netflix + Disney+ + Streamz
Netwerk = Mikrotik + Ubiquiti
Gebruikersavatar
krisken
userbase crew
userbase crew
Berichten: 19763
Lid geworden op: 07 nov 2006, 12:11
Twitter: kriskenbe
Locatie: Massemen - 91WET0
Uitgedeelde bedankjes: 1857 keer
Bedankt: 1035 keer

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

Groetjes
Kris

Internet = Orange 150/15Mbps + WirelessBelgië
Telefonie = EDPnet + OVH
GSM = Orange Go Extreme SE + Scarlet Red
TV = TVV App + Netflix + Disney+ + Streamz
Netwerk = Mikrotik + Ubiquiti
gerree
Plus Member
Plus Member
Berichten: 215
Lid geworden op: 28 maa 2008, 21:15
Locatie: Scherpenheuvel
Uitgedeelde bedankjes: 3 keer

Heb je mymaps van google al eens bekeken? :-)
Gebruikersavatar
krisken
userbase crew
userbase crew
Berichten: 19763
Lid geworden op: 07 nov 2006, 12:11
Twitter: kriskenbe
Locatie: Massemen - 91WET0
Uitgedeelde bedankjes: 1857 keer
Bedankt: 1035 keer

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

Internet = Orange 150/15Mbps + WirelessBelgië
Telefonie = EDPnet + OVH
GSM = Orange Go Extreme SE + Scarlet Red
TV = TVV App + Netflix + Disney+ + Streamz
Netwerk = Mikrotik + Ubiquiti
Gebruikersavatar
raf1
Elite Poster
Elite Poster
Berichten: 5780
Lid geworden op: 17 nov 2009, 22:39
Uitgedeelde bedankjes: 261 keer
Bedankt: 1770 keer
Recent bedankt: 10 keer

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
Starter Plus
Starter Plus
Berichten: 34
Lid geworden op: 13 maa 2007, 20:10
Uitgedeelde bedankjes: 4 keer

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.

Gebruikersavatar
raf1
Elite Poster
Elite Poster
Berichten: 5780
Lid geworden op: 17 nov 2009, 22:39
Uitgedeelde bedankjes: 261 keer
Bedankt: 1770 keer
Recent bedankt: 10 keer

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>
Gebruikersavatar
krisken
userbase crew
userbase crew
Berichten: 19763
Lid geworden op: 07 nov 2006, 12:11
Twitter: kriskenbe
Locatie: Massemen - 91WET0
Uitgedeelde bedankjes: 1857 keer
Bedankt: 1035 keer

Morgen hier eens verder naar kijken, dank!

Internet = Orange 150/15Mbps + WirelessBelgië
Telefonie = EDPnet + OVH
GSM = Orange Go Extreme SE + Scarlet Red
TV = TVV App + Netflix + Disney+ + Streamz
Netwerk = Mikrotik + Ubiquiti
Plaats reactie

Terug naar “Development”