AJAX BASED GOOGLE MAP

anujgarg · September 29, 2008

I am trying to display Google Map via AJAX. But unable to do the same. Map is not gonna displayed on the screen.

All I am doing is the following:

</div>

In AJAX Function:

var url = base_url+'jobs/candidatesearch/';

var strURL = url;

req.onreadystatechange = function() {

if (req.readyState == 4) {

// only if "OK"

if (req.status == 200) {

document.getElementById('search_map').innerHTML = "";

//document.getElementById('search_map').innerHTML=req.responseText;

} else {

alert("There was a problem while using XMLHTTP:\n" + req.statusText);

}

MAP CODE:

function candidatesearch()

{

//<![CDATA[

if (GBrowserIsCompatible()) {

// this variable will collect the html which will eventually be placed in the side_bar

var side_bar_html = "";

// arrays to hold copies of the markers and html used by the side_bar

// because the function closure trick doesnt work there

var gmarkers = [];

// A function to create the marker and set up the event window

function createMarker(point,name,html) {

var marker = new GMarker(point);

GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml(html);

});

// save the info we need to use later for the side_bar

gmarkers.push(marker);

// add a line to the side_bar html

side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '</a><br>';

return marker;

}

// This function picks up the click and opens the corresponding info window

function myclick(i) {

GEvent.trigger(gmarkers, "click");

}

// create the map

var map = new GMap2(document.getElementById("map"));

map.addControl(new GLargeMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng( 43.907787,-79.359741), ;

// add the points

var point = new GLatLng(43.65654,-79.90138);

var marker = createMarker(point,"This place","Some stuff to display in the<br>First Info Window")

map.addOverlay(marker);

var point = new GLatLng(43.91892,-78.89231);

var marker = createMarker(point,"That place","Some stuff to display in the<br>Second Info Window")

map.addOverlay(marker);

var point = new GLatLng(43.82589,-78.89231);

var marker = createMarker(point,"The other place","Some stuff to display in the<br>Third Info Window")

map.addOverlay(marker);

// put the assembled side_bar_html contents into the side_bar div

document.getElementById("side_bar").innerHTML = side_bar_html;

}

else {

alert("Sorry, the Google Maps API is not compatible with this browser");

}

//]]>

</script>

</body>

}

How can I solve this problem?

Sign In

AJAX BASED GOOGLE MAP

Recommended Posts

anujgarg

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information