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

Asked

Viewed 700 times

1

I’m having trouble using the Google Maps V3 API (using Codeigniter). The view that receives the map has no formatting other than that already provided by the API. In this way, I created an iframe that loads this view inside the page where I intend to use it and a form receiving the location 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 don’t know how to update the iframe and with it create the destination map. Below are the codes:

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 locazizacao_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 mapa_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 the 'mapa_view view 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 anyone knows any other way to do the integration containing the Output/Destination information or if anyone knows the solution to this problem, I would be most grateful.

php javascript jquery codeigniter google-maps
  • 2

    sorry, I didn’t understand correctly. You want to improve this code is this?

2 answers

1

  • 2

    Check this out: http://meta.answall.com/questions/42/queremos-respostas-que-contenham-somente-links For the answer to be interesting to everyone, to be located by searchers, it needs to have content, even if you have to bring the contents of the link (if allowed and still keep a reference to it)

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 where I work very recently.

The Google Maps API 3 is excellent, including an entire section on how to map wheels with Google Maps link

It is very well explained, even has a ready example code that you can use of reference, what I can explain to you is that basically you will have global variables in your code, one of them is the object of the Map 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 will give the Submit in the form sending the source data, pass this origin as a parameter of this function.

OBS: do not forget to leave the form Submit returning false, otherwise the page will always be reloaded every Ubmit and the script will not work.

Browser other questions tagged php javascript jquery codeigniter google-maps

You are not signed in. Login or sign up in order to post.