Load map after clicking ajax request from marker of Google Map

Question

Hi I'm encountering a problem regarding creating a new map upon clicking the marker. So here is the flow that I want:

Display default google map with markers that I included - I'm okay with this
Upon clicking of marker I'll create a new map which the markers will be removed then I'll put an overlay image.

So the problem is whenever I click the marker the new map doesn't appear. Here is my code

Controller

public function index()
{

    $config = array();

    $config['center']      = '**.*******, **.*******';
    $config['zoom']        = '6';
    $config['map_height']  = "500px";


    $this->googlemaps->initialize($config);

    $marker = array();
    $marker['position']     = "*********";
    $marker['onclick']      = "
                                $.ajax({  
                                url: 'Welcome/new_map',  
                                success: function(data) {  
                                    $('#v_map').html(data);
                                }  
                            }); 
                            ";

    $marker['animation']    = 'DROP';
    $this->googlemaps->add_marker($marker);

    $marker = array();
    $marker['position']     = "*********";
    $this->googlemaps->add_marker($marker);

    $data['map'] = $this->googlemaps->create_map();

    $this->load->view('welcome_message', $data);
}

public function new_map(){

    $config = array();

    $config['center']      = '**.*******, **.*******';
    $config['zoom']        = '6';
    $config['map_height']  = "500px";


    $this->googlemaps->initialize($config);

    $marker = array();
    $marker['position']     = "*********";
    $marker['onclick']      = "
                                $.ajax({  
                                url: 'Welcome/new_map',  
                                success: function(data) {  
                                    $('#v_map').html(data);
                                }  
                            }); 
                            ";

    $marker['animation']    = 'DROP';
    $this->googlemaps->add_marker($marker);

    $marker = array();
    $marker['position']     = "*********";
    $this->googlemaps->add_marker($marker);

    $data['map'] = $this->googlemaps->create_map();

    $this->load->view('map_template', $data);
}

View

<html lang="en">
<head>
    <?php echo $map['js']; ?>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>  
</head>
<body>
  <div id = "v_map">
    <?php echo $map['html']; ?>
  </div>
</body>
</html>

map_template

<?php echo $map['html']; ?>

I'm currently trying to fix that the new map will appear before proceeding with the overlay part.

PS. I'm using Biostall's library of Google maps for Codeigniter.

Akshay Hegde · Accepted Answer · 2017-10-07T04:44:04.670

In your public function new_map(){, you are trying to get ajax response, so you need

From

  $this->load->view('map_template', $data);

To

 echo $this->load->view('map_template', $data, TRUE);

Ref: https://www.codeigniter.com/user_guide/general/views.html

Returning views as data

There is a third optional parameter lets you change the behavior of the method so that it returns data as a string rather than sending it to your browser. This can be useful if you want to process the data in some way. If you set the parameter to TRUE (boolean) it will return data.

Here is working controller, on CI 2.2.6, if you are on new version of codeigniter than you need to take care of filename conventions (Ucfirst-like manner):

Here is Ref : https://codeigniter.com/user_guide/general/styleguide.html

<?php

if (!defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->library('googlemaps');
        $this->load->helper('url');
    }

    public function index()
    {
        $config = array();
        $config['center'] = '37.4419, -122.1419';
        $config['zoom'] = 'auto';
        $config['map_height'] = "500px";
        $this->googlemaps->initialize($config);

        $url = site_url('welcome/new_map');
        $marker = array();
        $marker['position'] = "*********";
        $marker['onclick'] = " 
                                $.ajax({  
                                url: '$url',
                                success: function(data) {  
                                    $('#v_map').html(data);
                                    initialize_map();
                                }
                            }); 
                            ";
        $marker['animation'] = 'DROP';
        $this->googlemaps->add_marker($marker);
        $marker = array();
        $marker['position'] = "*********";
        $this->googlemaps->add_marker($marker);

        $data['map'] = $this->googlemaps->create_map();

        $this->load->view('map', $data);
    }

    public function new_map()
    {
        // map config
        $config = array();
        $config['center'] = '37.4419, -122.1419';
        $config['zoom'] = 'auto';
        $config['map_height'] = "500px";

        // no need of including script tag again
        $config['maps_loaded'] = 1;

        $this->googlemaps->initialize($config);

        // overlay image
        $groundOverlay = array();
        $groundOverlay['image'] = 'http://maps.google.com/intl/en_ALL/images/logos/maps_logo.gif';
        $groundOverlay['positionSW'] = '40.712216,-74.22655';
        $groundOverlay['positionNE'] = '40.773941,-74.12544';
        $this->googlemaps->add_ground_overlay($groundOverlay);

        // create map
        $data = $this->googlemaps->create_map();

         // ajax response
        echo $data['html'] . $data['js'];

        // Since there is no need of loading, view just used echo
    }
}

/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */

View File : map.php

<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 
  <?php echo $map['js']; ?> 
</head>
<body>
  <div id = "v_map">
    <?php echo $map['html']; ?>
  </div> 
</body>
</html>

Library:

Source : https://raw.githubusercontent.com/BIOSTALL/CodeIgniter-Google-Maps-V3-API-Library/master/application/libraries/Googlemaps.php

So what all I have, in my application folder :

$ pwd
/var/www/html/ci/application

.
├── controllers
│   ├── index.html
│   └── welcome.php
├── libraries
│   ├── Googlemaps.php
│   └── index.html
└── views
    ├── index.html
    ├── map.php
    └── welcome_message.php

Access:

http://127.0.0.1/ci/index.php/welcome

And click on marker, you will get below overlay image after clicking marker

Overlay image:

I've added the `initialize_map();` and echo the ajax response to get the same result. Thanks. — user3235016, Oct 10 '17 at 01:50

Load map after clicking ajax request from marker of Google Map

1 Answers1