Refresh with Iframe Parameter using jquery - Google Maps API V3 - CodeIgniter

1

I'm having trouble using the Maps API V3 (using Codeigniter). The view that receives the map has no formatting other than that already provided by the API. This way, I created an iframe that loads this view into the page where I want to use it and a form receiving the place where the user is, so that the map is made to the location of the establishment that is fixed. The problem is that I need to step by is that I do not know how to update the iframe and with it create the destination map. Here are the codes below:

Controller:

class Localizacao extends CI_Controller
{
    public $estilo = 'css/responsivo/estilo.css';
    public $header = 'css/header.css';
    public $principal = 'css/principal.css';
    function __construct()
    {
    parent::__construct();

    //Carregamento dos helpers na página
    $this->load->helper(array('form', 'html', 'url'));
    $this->load->library(array('googlemaps','input'));
}

function index()
{
    //Carrgando dados a view
    $dados = array(
                'titulo' => 'Titulo',
                'estilo' => $this->estilo,
                'header' => $this->header,
                'principal' => $this->principal,
                'formulario' => array(
                                    'id' => 'traca-rota',
                                    'class' => 'form-rota',
                                    ),
                );
    $this->load->view('localizacao_view', $dados);
}

function mapa($local = NULL)
{
    if($local == NULL)
        $localizacao = 'Endereço de Destino';
    else
        $localizacao = preg_replace("-", " ", $local);

    $config['center'] = 'Endereço de destino';
    $config['zoom'] = 'auto';
    $config['directions'] = TRUE;
    $config['directionsStart'] = $localizacao;
    $config['directionsEnd'] = 'Endereço de Destino';
    $config['directionsDivID'] = 'directionsDiv';

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

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

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

View localization_view:

<?php include 'includes/header.php';  ?>
<?php echo form_open('#', $formulario); ?>
    <input type="text" name="localizacao">
    <input type="submit" value="Traçar Rota" id="traca_rota">
<?php form_close(); ?>
<div id="fora">
    <iframe src="<?php echo base_url('/localizacao/mapa/'); ?> " frameborder="0"></iframe>
</div>

View map_view:

<!DOCTYPE html>
<html>
<head>
    <?php echo $map['js']; ?>
</head>
<body>
    <?php echo $map['html']; ?>
    <div id="directionsDiv"></div>
</body>
</html>

Method that sends parameter to view 'map_view':

$('#traca-rota').submit(function(){
    var dados = $( this ).serialize();
    var action = "http://urldosite.com/localizacao/mapa";

    $.ajax({
        type: "POST",
        url: action,
        data: dados,
        success: function( data )
        {
                            //Evitar refresh em página
            return false;
        }
    });
    return false; //Faz com que o Formulário Não envie seus dados da Maneira Tradicional
});

If someone knows some other way to do the integration containing the Outbound / Destination information or if someone knows the solution to this problem, I'll be very grateful.

    
asked by anonymous 15.01.2014 / 14:05

2 answers

1

If you just want to update the iframe, maybe this link will help: link

Test put the target tag on your form with the iframe id.

    
15.01.2014 / 14:13
0

By chance, what you intend to do would be something like this link ?

This is a page for the user to trace the wheel to the hotel, I made this site at the agency I have been working on for quite some time.

Google Maps API 3 is great, there's even an entire section talking about mapping wheels with Google Maps in Portuguese, link

It's super well explained, even has a sample code ready that you can use for reference, what I can explain to you is that basically you will have global variables in your code, one of them is the Map object that you will create in the page. Another function will be created to render the map on the page. And another function for you to call every time the user gives the submit in the form sending the source data, pass that source as a parameter of that function.

OBS: do not forget to leave with submit form returning false, otherwise the page will always be reloaded with each submit and the script will not work.

    
04.03.2014 / 02:15