I am currently working on integrating custom markers from a database into my Google map. While I have successfully loaded KML layers, I aim to allow users to save and load their personalized markers stored in the database.
The structure of my database is as follows:
| ID | TITLE | LAT | LON |
Considering that each user will have their own set of custom points, my goal is to retrieve these points and display them as a layer on the map alongside other default layers (KML). I have learned that creating a data layer, along with using geoJSON, would be the most efficient approach. However, I am still in the process of figuring out how to generate geoJSON from my database.
At the moment, I am utilizing a generic JSON file to test if I can incorporate it as a toggleable layer, but I am facing some difficulties. Once I manage to resolve this issue, I plan to extract the data from the database, format it in geoJSON, and integrate it into the map.
Here is an excerpt of my attempt to incorporate JSON data as a toggleable layer, albeit unsuccessfully:
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -49.7770641, lng: 55.6602758},
zoom: 6,
mapTypeControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
});
layers[0] = new google.maps.KmlLayer('http://www.example.com/kmllayer1.kml', {preserveViewport: true, suppressInfoWindows: false, zIndex: 1});
layers[1] = new google.maps.KmlLayer('http://www.example.com/kmllayer2.kml', {preserveViewport: true, zIndex: 2, suppressInfoWindows: true});
layers[2] = map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
for (var i = 0; i < layers.length; i++) {
layers[i].setMap(map);
}
}
function toggleLayer(i) {
if(layers[i].getMap() === null) {
layers[i].setMap(map);
}
else {
layers[i].setMap(null);
}
}