Download map after clicking ajax request from google map marker

Question

Download map after clicking ajax request from google map marker

Hey. I am facing the problem of creating a new map when I click a marker. So here is the thread I want:

Display default google map with markers that I turned on - I'm fine with this
When I click a marker, I will create a new map, which will remove the markers, and I will overlay the overlay image.

So the problem is that whenever I click the marker, a new map does not 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 establish that a new map will appear before continuing with the overlay part.

PS. I am using the Google Biostall library for Google maps for Codeigniter.

+6

javascript jquery codeigniter google-maps

user3235016 Oct 2 '17 at 9:05

1

Akshay Hegde · Accepted Answer · 2017-10-07T02:25:49+0000

public function new_map(){ ajax,

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

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

: https://www.codeigniter.com/user_guide/general/views.html
, , , . , . TRUE (boolean), .

CI 2.2.6, codeigniter, (Ucfirst-like):

: 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 */

: 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>

:

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

, , :

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

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

:

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

,

:

Download map after clicking ajax request from google map marker

More articles: