Google maps are failing to display on the page when loading via ajax

When I click a button, I use AJAX to load a page, but the map on the loaded page is not displaying. There are no errors showing up either. I have tried adding initmap() after the ajax load, but it doesn't work. Do I need to bind it somehow?

What am I missing here?

The code for the map is:

<div id='map-canvas'></div>

The JavaScript code is as follows:

function initMap() {
  var pointA = new google.maps.LatLng(51.7519, -1.2578),
    pointB = new google.maps.LatLng(50.8429, -0.1313),
    myOptions = {
      zoom: 7,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService,
    directionsDisplay = new google.maps.DirectionsRenderer({
      map: map
    }),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "point A",
      label: "A",
      map: map
    }),
    markerB = new google.maps.Marker({
      position: pointB,
      title: "point B",
      label: "B",
      map: map
    });

  // get route from A to B
  calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);

}

initMap();

function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
  directionsService.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

The button's code that loads the content is:

$(document).ready(function(){
    $(".mainstuff button").click(function(){
        $('#loader').show();
        status = $(this).attr("data-name");
        var new_url = "get_job_details.php?job_id="+status;
        $("#div1").load(new_url);
    });
});

This produces the following output:

echo "<div id='map-canvas'></div><table class='mainTable'>
<tbody>
... (omitted for brevity)
</tr>
</tbody>
</table>";
}

Answer №1

Consider enhancing your ajax implementation by integrating initMap() upon ajax completion

$(document).ready(function(){   
    $(".mainstuff button").click(function(){    
        var status = $(this).attr("data-name");
        $('#loader').show();
        $.ajax({
            url : "get_job_details.php",
            cache: false,
            data: { 'job_id':status },
            type: 'GET', 
            success : function(data) {
                $("#div1").html(data);
                $('#loader').hide();
                initMap();
            },
            error: function(data) {
                $('#loader').hide();
            }
        });
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble displaying images using ejs.renderfile

I've been struggling to generate a PDF from an EJS file with the image rendering correctly. Here is my setup: My app.js code snippet: let express = require("express"); let app = express(); let ejs = require("ejs"); let pdf = require("html-pdf"); let ...

Steps to implement jQuery after executing the command "npm install jquery"

Greetings! I recently utilized npm install jquery to add jQuery to my project. However, I noticed that it was downloaded into node_modules\jquery along with some unnecessary files. My goal is to only move node_modules\jquery\dist\jquer ...

Modifying Bracket Shell Name leads to WebSocket Connection Failure

I have been working on developing an application using the Brackets shell. Specifically, I am in the process of creating a customized code editor for a project rather than starting from scratch by modifying Brackets. Up until now, I have managed to addres ...

What is the best method for encrypting a URL that contains AngularJS data?

Here is the URL that needs to be encrypted: <a class="btn btn-success btn-sm btn-block" href="@Url.Action("myAction", "myController")?Id={{repeat.Id}}&HistoryId={{repeat.HistoryId}}" ng-cloak>View History</a> I am seeking guidance on enc ...

When does .ajaxComplete trigger in relation to the success callback?

Is there a method to determine whether the call was successful or not after it has been made? Alternatively, is there a way to execute a function after the success of each call if invoked before the call? ...

Optimizing CSS for printing by eliminating unnecessary white space with media queries

Appreciate your assistance! I'm currently working on a solution to print a specific div using CSS Media queries. When the user clicks on print, I want to hide all other elements except for the body div they chose. However, I'm facing an issue whe ...

Converting an array of objects to an array based on an interface

I'm currently facing an issue with assigning an array of objects to an interface-based array. Here is the current implementation in my item.ts interface: export interface IItem { id: number, text: string, members: any } In the item.component.ts ...

JavaScript regex for the 'hh:mm tt' time format

I need to validate time in the format 'hh:mm tt'. Here is an example of what needs to be matched: 01:00 am 01:10 Pm 02:20 PM This is what I have tried so far: /^\d{2}:\d{2}:\s[a-z]$/.test('02:02 am') ...

Retrieving additional parameters from an HTTP request

Imagine a scenario where I am sending a request to a Node Server in order to retrieve a JS file: <script src="/example.js" id="123456"> On the Node server side: app.get('/example.js', function(req, res, next) { console.log(req.params.id) ...

Chrome App Experiencing Issues with DOM Loading

I am working on converting a simple HTML5 Snake game that utilizes canvas into a Chrome App. Below is the snippet of my original HTML file: <!DOCTYPE html> <html> <head> <title>Snake</title> <link rel=" ...

Exploring the art of path zooming in d3.js

Trying to resolve this issue, I adjusted the geoJsonURL to handle a more intricate shape. Despite the new shape allowing the zoom method to function correctly, the shape itself appears completely distorted. Based on the Coordinate system: WGS 84 (EPSG:4326 ...

What is the proper way to use an AND operation in jQuery on multiple attributes?

I have a list of DIV tags structured as follows: <div status="1" searchText="some text">...</div> <div status="2" searchText="more text">...</div> <div status="1" searchText="even">...</div> To toggle the visibility of ...

Accessing stored web pages / Browser as an interactive interface

I have a couple of questions I need help with. The first one is about how to open a saved HTML file in a browser without an internet connection. Next, I'm looking for advice on using the browser as a user interface for a desktop image viewing program ...

Uploading a JSON file to myjson.com using a jQuery PUT request in Node.js

As a novice in javascript, I have successfully retrieved a JSON object from on my HTML page using AJAX with the following code: $.getJSON("https://api.myjson.com/bins/bjm28", function (data) { $.each(data, function (index, value) { console.log ...

Ways to transfer information from the Controller to the View in a DataTable using Ajax

Within my main controller, I have created a function that retrieves data from the database, formats it, and outputs it as JSON. My current challenge is figuring out how to display this data in a DataTable. Most examples I've come across involve retrie ...

Close pop-up upon successful AJAX response in ASP.NET MVC

I have a modal in my view that allows me to create a new record in the database. The view for this functionality is contained within a partial view. Below is the code for the view: <script src="~/Scripts/jquery-3.1.1.js"></script> To han ...

Turning HTML into an image with the power of JavaScript

Utilizing html2canvas to convert a div into an image, everything is functioning properly except for the Google font effect. The image shows how it eliminates the effect from the text. https://i.stack.imgur.com/k0Ln9.png Here is the code that I am using f ...

React's setState method may not trigger a re-render

I am currently working on a personal project using React for the front-end and Node for the back-end. One part of the application involves counting the entries when a user submits an image URL, updating it on the server, and then re-rendering it on the fro ...

Before the async function, make sure to set the value using React's useState

Exploring the world of react context api for the very first time. Below is my react code utilizing the context api: const [valChanged, setValChanged] = useState(false); async function modalSave() { await setValChanged(true); // STEP 1 await o ...

Adding .js extension to relative imports in TypeScript compilation for ES6 modules

This particular issue may appear simple at first glance, but determining the required settings/configurations to resolve it is not straightforward. Below are the directory structure and source code for a Hello World program: Directory Structure: | -- Hel ...