I developed a custom Google Maps application using JSON data and implemented PostgreSQL database integration.
Here is the code snippet:
<script type="text/javascript">
var map;
var national = [{"lng":"-6.173319","city":"JAKARTA","lat":"106.818672"}];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-0.789275,113.921327),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$.getJSON('json_city.json', function(data) {
$.each( data.national, function(index, item) {
var myLatlng = new google.maps.LatLng(item.lat, item.lng);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "text "+item.city
});
});
});
// Initialize the map
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The latitude and longitude values are stored as character types (Text). Although the map displays correctly, there seems to be an issue with displaying the markers.