Pagina 1 van 1
Google Maps API - Hulp gezocht
Geplaatst: 16 okt 2016, 21:55
door krisken
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!
Re: Google Maps API - Hulp gezocht
Geplaatst: 16 okt 2016, 22:13
door butskristof
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.
Re: Google Maps API - Hulp gezocht
Geplaatst: 16 okt 2016, 22:17
door krisken
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.
Re: Google Maps API - Hulp gezocht
Geplaatst: 16 okt 2016, 22:31
door butskristof
Okay, had handig geweest als ik ze ergens via JSON had kunnen inlezen.
Ik probeer het morgen te bekijken!
Re: Google Maps API - Hulp gezocht
Geplaatst: 16 okt 2016, 22:32
door krisken
Bedankt Kristof!
Re: Google Maps API - Hulp gezocht
Geplaatst: 23 okt 2016, 16:14
door krisken
Hey Kristof, heb jij hier aub al ns naar kunnen kijken?
Groetjes
Kris
Re: Google Maps API - Hulp gezocht
Geplaatst: 23 nov 2016, 20:56
door gerree
Heb je mymaps van google al eens bekeken?
Re: Google Maps API - Hulp gezocht
Geplaatst: 29 nov 2016, 11:33
door krisken
Nog niet bekeken, daar het de bedoeling is dat we dit zelf hosten. Willen niet dat het ergens extern staat.
Re: Google Maps API - Hulp gezocht
Geplaatst: 29 nov 2016, 18:04
door raf1
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.
Re: Google Maps API - Hulp gezocht
Geplaatst: 29 nov 2016, 20:39
door raro11
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.
Re: Google Maps API - Hulp gezocht
Geplaatst: 29 nov 2016, 21:33
door raf1
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>
Re: Google Maps API - Hulp gezocht
Geplaatst: 30 nov 2016, 00:09
door krisken
Morgen hier eens verder naar kijken, dank!