Google Maps API - Hulp gezocht

Gebruikersavatar
krisken
Elite Poster
Elite Poster
Berichten: 17501
Lid geworden op: 07 Nov 2006
Twitter: kriskenbe
Locatie: Massemen - 91WET0
Bedankt: 828 keer
Recent bedankt: 2 keer
Uitgedeelde bedankjes: 1669 keer
Contact:

Google Maps API - Hulp gezocht

Berichtdoor krisken » 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!

Internet = Orange 100/10Mbps + WirelessBelgië + Billi (2x 100/30Mbps profiel)
Telefonie = WeePee + Speakup + Billi + OVH
GSM = Orange Koala Smartphone + Scarlet Red
TV = Bhaalu + Netflix + Orange
Netwerk = Mikrotik & UBNT powered

butskristof
Elite Poster
Elite Poster
Berichten: 1165
Lid geworden op: 19 Dec 2011
Locatie: Heist-op-den-Berg
Bedankt: 68 keer
Recent bedankt: 1 keer
Uitgedeelde bedankjes: 474 keer
Contact:

Re: Google Maps API - Hulp gezocht

Berichtdoor 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.
 MacBook Pro 15" (2017)  MacBook Pro 13" (Mid 2015)  iPhone 7 Plus  iPad Air 2  Watch Series 3

Gebruikersavatar
krisken
Elite Poster
Elite Poster
Berichten: 17501
Lid geworden op: 07 Nov 2006
Twitter: kriskenbe
Locatie: Massemen - 91WET0
Bedankt: 828 keer
Recent bedankt: 2 keer
Uitgedeelde bedankjes: 1669 keer
Contact:

Re: Google Maps API - Hulp gezocht

Berichtdoor krisken » 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.

Internet = Orange 100/10Mbps + WirelessBelgië + Billi (2x 100/30Mbps profiel)
Telefonie = WeePee + Speakup + Billi + OVH
GSM = Orange Koala Smartphone + Scarlet Red
TV = Bhaalu + Netflix + Orange
Netwerk = Mikrotik & UBNT powered

butskristof
Elite Poster
Elite Poster
Berichten: 1165
Lid geworden op: 19 Dec 2011
Locatie: Heist-op-den-Berg
Bedankt: 68 keer
Recent bedankt: 1 keer
Uitgedeelde bedankjes: 474 keer
Contact:

Re: Google Maps API - Hulp gezocht

Berichtdoor 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!
 MacBook Pro 15" (2017)  MacBook Pro 13" (Mid 2015)  iPhone 7 Plus  iPad Air 2  Watch Series 3

Gebruikersavatar
krisken
Elite Poster
Elite Poster
Berichten: 17501
Lid geworden op: 07 Nov 2006
Twitter: kriskenbe
Locatie: Massemen - 91WET0
Bedankt: 828 keer
Recent bedankt: 2 keer
Uitgedeelde bedankjes: 1669 keer
Contact:

Re: Google Maps API - Hulp gezocht

Berichtdoor krisken » 16 Okt 2016, 22:32

Bedankt Kristof!

Internet = Orange 100/10Mbps + WirelessBelgië + Billi (2x 100/30Mbps profiel)
Telefonie = WeePee + Speakup + Billi + OVH
GSM = Orange Koala Smartphone + Scarlet Red
TV = Bhaalu + Netflix + Orange
Netwerk = Mikrotik & UBNT powered

Gebruikersavatar
krisken
Elite Poster
Elite Poster
Berichten: 17501
Lid geworden op: 07 Nov 2006
Twitter: kriskenbe
Locatie: Massemen - 91WET0
Bedankt: 828 keer
Recent bedankt: 2 keer
Uitgedeelde bedankjes: 1669 keer
Contact:

Re: Google Maps API - Hulp gezocht

Berichtdoor krisken » 23 Okt 2016, 16:14

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

Groetjes
Kris

Internet = Orange 100/10Mbps + WirelessBelgië + Billi (2x 100/30Mbps profiel)
Telefonie = WeePee + Speakup + Billi + OVH
GSM = Orange Koala Smartphone + Scarlet Red
TV = Bhaalu + Netflix + Orange
Netwerk = Mikrotik & UBNT powered

gerree
Plus Member
Plus Member
Berichten: 209
Lid geworden op: 28 Mar 2008
Locatie: Scherpenheuvel
Uitgedeelde bedankjes: 2 keer

Re: Google Maps API - Hulp gezocht

Berichtdoor gerree » 23 Nov 2016, 20:56

Heb je mymaps van google al eens bekeken? :-)
Afbeelding

Gebruikersavatar
krisken
Elite Poster
Elite Poster
Berichten: 17501
Lid geworden op: 07 Nov 2006
Twitter: kriskenbe
Locatie: Massemen - 91WET0
Bedankt: 828 keer
Recent bedankt: 2 keer
Uitgedeelde bedankjes: 1669 keer
Contact:

Re: Google Maps API - Hulp gezocht

Berichtdoor krisken » 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.

Internet = Orange 100/10Mbps + WirelessBelgië + Billi (2x 100/30Mbps profiel)
Telefonie = WeePee + Speakup + Billi + OVH
GSM = Orange Koala Smartphone + Scarlet Red
TV = Bhaalu + Netflix + Orange
Netwerk = Mikrotik & UBNT powered

Gebruikersavatar
raf1
Elite Poster
Elite Poster
Berichten: 3935
Lid geworden op: 17 Nov 2009
Bedankt: 1332 keer
Recent bedankt: 11 keer
Uitgedeelde bedankjes: 226 keer

Re: Google Maps API - Hulp gezocht

Berichtdoor 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
Starter Plus
Starter Plus
Berichten: 34
Lid geworden op: 13 Mar 2007
Uitgedeelde bedankjes: 5 keer

Re: Google Maps API - Hulp gezocht

Berichtdoor raro11 » 29 Nov 2016, 20:39

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

http://pastebin.com/raw/GtXHUV2B

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.

https://jsfiddle.net/gaz94cz8/3/

Gebruikersavatar
raf1
Elite Poster
Elite Poster
Berichten: 3935
Lid geworden op: 17 Nov 2009
Bedankt: 1332 keer
Recent bedankt: 11 keer
Uitgedeelde bedankjes: 226 keer

Re: Google Maps API - Hulp gezocht

Berichtdoor 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>

Gebruikersavatar
krisken
Elite Poster
Elite Poster
Berichten: 17501
Lid geworden op: 07 Nov 2006
Twitter: kriskenbe
Locatie: Massemen - 91WET0
Bedankt: 828 keer
Recent bedankt: 2 keer
Uitgedeelde bedankjes: 1669 keer
Contact:

Re: Google Maps API - Hulp gezocht

Berichtdoor krisken » 30 Nov 2016, 00:09

Morgen hier eens verder naar kijken, dank!

Internet = Orange 100/10Mbps + WirelessBelgië + Billi (2x 100/30Mbps profiel)
Telefonie = WeePee + Speakup + Billi + OVH
GSM = Orange Koala Smartphone + Scarlet Red
TV = Bhaalu + Netflix + Orange
Netwerk = Mikrotik & UBNT powered


Terug naar “Web-en applicatie-ontwikkeling”

Wie is er online

Gebruikers op dit forum: Geen geregistreerde gebruikers en 2 gasten