Google Maps - Passing Data via jQuery

[eluser]Otaku Coder[/eluser]
Hi,

I'm developing a googlemaps mashup but I'm trying to figure out how to pass marker data to the map. So far I have a model which returns the required marker data and uses the JSON helper library to encode the output in JSON format. However, I don't know how to get that data into my map. I am familiar with the maps API so I know I just need to call 'gmap.addOverlay(marker)' once I've run eval on the data.

My guess is that I need a jQuery function to read my PHP variable passed to the view, and then call my 'createMarker' javascript function, but as I'm still learning the intricacies of AJAX and jQuery I'm unsure how I'm meant to do this.

Apologies if my post is a bit confusing, I haven't had my morning coffee yet!!! Any help or advice would be appreciated.

[eluser]Otaku Coder[/eluser]
Ahh I think I get it now. I create a basic controller function that just calls the model function, json_encodes it and chucks out the array rather than passing it via a view? Then call that controller function from jQuery....or am I going down the wrong route again??

[eluser]bretticus[/eluser]
Sounds fine to me. Then again, not being very familiar with your maps, why not just pass the array to the view that the map is on? you could pass it as a json-encoded array string. I suppose if a person is surveying New York City and you have thousands of markers in your database, it might be nice to use ajax to get just the applicable ones to the current map view.

http://us.php.net/manual/en/function.json-encode.php

[eluser]Otaku Coder[/eluser]
Thanks for the reply bretticus. I guess the real sticking point is passing a PHP variable to a javascript function contained within a separate script file. That's why I'm now using JSON. I'll post up some code snippets so you can take a look when I'm at my dev machine.

[eluser]bretticus[/eluser]
Well, actually, I meant something like this:

Code:

class Maps extends Controller {

    function Maps()
    {
        parent::Controller();    
    }
    
    function index()
    {
        $this->load->model('markers');
        $data['markers'] = json_encode($this->markers->get_all());
        $this->load->view('maps', $data);
    }
}

The model would use something like result_array() to get the results as an array.

Then, in your view, just print the $markers variable inline:

Code:

(script tags)
var markers = <?=$markers?>

[eluser]Otaku Coder[/eluser]
But then wouldn't that make the page really messy when you start dealing with a large dataset? Like 5000+ markers??

[eluser]Otaku Coder[/eluser]
Well I got something working. It's probably not strict MVC and there will be a much better way to do this, but what I've got so far looks like this:

My controller:

Code:

function map($mapname) {
        $data['title'] = "Test Map";
        $data['map_id'] = $this->Maps_Model->get_map_id($mapname);
        $this->load->vars($data);
        $this->load->view('map_viewer');
}


function ajaxMarkers($map_id){

        $this->load->helper('json');
        // Pull out the markers for a given map_id
        $data['markers'] = $this->Markers_Model->getMarkers($map_id);        
        echo json_encode($data['markers'];
}

My View:

Code:

$(document).ready(function() {
        $.get(<?php echo "'http://www.mywebsite.local/maps/ajaxMarkers/".$map_id."'"; ?>, parseJson);
});

And in my gmap.js script file:

Code:

function parseJson(doc){
    var jsonData = eval("(" + doc + ")");
    for (var i = 0; i < jsonData.markers.length; i++)
    {
        var marker = createMarker(jsonData.markers[i]);
        map.addOverlay(marker);
    }
}

function createMarker(input) {
    var marker = new GMarker(new GLatLng(input.latitude,input.longitude));
    return marker;
}

[eluser]bretticus[/eluser]
[quote author="Otaku Coder" date="1237346723"]But then wouldn't that make the page really messy when you start dealing with a large dataset? Like 5000+ markers??[/quote]

Right, that's why I gave the New York example.

Okay, so you have the marker data by the current listing data you are sending to the view. just create a new controller action like you theorized. It does nothing but return the marker specific data as an object (JSON.) Here's a very rough example:

Code:

header('Content-type: application/x-json');
echo json_encode($this->model->get_marker($this->input->segment(3));

Your jquery call could look something like this:

Code:

$.getJSON("<?=anchor('controller/action'. $row->geocord)?>", function(marker){
  gmap.addOverlay(marker);
});

You'd probably need to use a selector to wrap around my jquery code (that grabs all your links) look into the this object to get the data you will be sending to your crontroller. good luck!

Just make sure your marker array in PHP mimics a marker object in javascript

[eluser]Otaku Coder[/eluser]
Thanks for all your help. I'll try what you suggest and will post back on my progress.