I'm currently working on building my own personal website, which is also my first webpage, and I'm encountering some difficulties with displaying a Google map.
Here's a breakdown of my situation: my webpage consists of four links that load the HTML code for each section inside a div. To avoid refreshing the webpage every time a link is clicked, I am using AJAX requests to receive the HTML code. When a section titled 'contact me' is clicked, I invoke the initialize method to load the map within a div that has been created in the new HTML code received via AJAX. I ensure that the initialize method is called only after the HTML code has been received.
Initially, everything appears to be functioning correctly. However, I notice that the map displays only when I click the 'contact me' link for the first time. Subsequent clicks on 'contact me' after visiting other sections result in the div being visible, but the map is no longer present:
// Unfortunately, I do not have enough reputation to post images yet.
Below is the initialize function:
function initialize() {
var target_div = document.getElementById("map"); // This corresponds to the ID of the div created in the HTML code received through AJAX.
var mapOptions = {
center: new google.maps.LatLng(65.6516152,-34.7739923),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(target_div, mapOptions); // *map* is a global variable (one of my numerous attempts to resolve the issue)
}
Additionally, here is the function that handles AJAX requests and calls initialize to display content within a div named receiver_div:
function open_section(clicked_link) {
if (actual_link != null){
actual_link = clicked_link;
receiver_div.fadeOut(750, function(){
receiver_div.html('');
$.ajax({
url: 'textos/'+clicked_link+'.txt',
success: function (received_file) {
receiver_div.html(received_file);
if (clicked_link == 'contactme') {
initialize();
}
receiver_div.fadeIn(750);
}
});
});
}
else{
actual_link = clicked_link;
$.ajax({
url: 'textos/'+ clicked_link + '.txt',
success: function(received_file){
receiver_div.html(received_file);
if (clicked_link == 'contactme') {
console.log(clicked_link);
initialize();
}
receiver_div.fadeIn(1500);
}
})
}
}
Do you have any insights into why this issue is occurring, or perhaps a better approach to implementing this functionality? Being a novice, I'm unsure if this is related to AJAX requests, CSS, or some other factor.
Thank you for your help!