Parse Javascript In AJAX Responce


When you call a XMLHttpRequest or AJAX request you get responce in four formats XML, HTML, JSON and Text.

Sometimes this responce may contain some javascript. e.g. If this responce has a alert(‘hello’) function

Than it will never be execute coz it will treated as text. So how you can parse the javascript which is in AJAX responce here is the solution

document.getElementById(‘my_div’).innerHTML = response;
var x = document.getElementById(‘my_div’).getElementsByTagName(“script”);
var h = document.getElementsByTagName(“head”)[0];
for(var i=0;i<x.length;i++)
{
var s = document.createElement(“script”);
s.type=”text/javascript”;
h.appendChild(s);
s.text=x[i].text;
}

That’s it, cheers!

Advertisements

Google Map Set Zoom Level


Sometimes we need to show all the markers in google map window if we are creating markers dynamically. Google had already thought about users this requirement, here is how you can do it.

Use the “GLatLngBounds” class to implement it:

var bounds = new GLatLngBounds();
bounds.extend(point1);
bounds.extend(point2);
bounds.extend(point13);
map.setCenter(bounds.getCenter());
map.setZoom(map.getBoundsZoomLevel(bounds));

OR

var bounds = new GLatLngBounds();

function zoomfit()
{
newzoom = getBoundsZoomLevel(bounds);
newcenter = bounds.getCenter();
map.setCenter (newcenter,newzoom);
}

function creatmarker()
{

var marker = new GMarker(point);
map.addOverlay(marker);
bounds.extend(point);
zoomfit();

}

Google Map Geocoding, mark location by physical address


Right now I am working on a real estate web application project. What was needed for me in this application was when a visitor searches for a location e.g. melbourne, australia. I just display the searched properties in some tabular format. But besides all this, what was required that I have to mark the searched properties on google map as well.

I have not stored the longitude and latitude of each property in database. So the task was difficult to mark the locations on google map without the coordinates.

Finally in google map api I found that google has recently intoduced the geocoding.

Geocoding : This is a service provided by google map which basically converts a physical address (like “1600 Amphitheatre Parkway, Mountain View, CA”) into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers or position on the map.

here is the code snips::

ewindow.js is a external javascript file I have used this to make customized info window you can get it from http://econym.org.uk/gmap/ewindows.htm

<div id=”GMap”>

<link type=”text/css” rel=”stylesheet” media=”screen” href=”css/mapinfowindow.css”/>
<script src=”http://maps.google.com/maps?file=api&v=2&key=ADD_YOUR_KEY_HERE&#8221; type=”text/javascript”></script>
<script src=”js/ewindow.js” type=”text/javascript”></script>
<script type=”text/javascript”>

//<![CDATA[

var geocoder;
var map;

// On page load, call this function

function load()
{

// Create new map object
map = new GMap2(document.getElementById(“map”));

map.addControl(new GSmallMapControl());

// Create new geocoding object
geocoder = new GClientGeocoder();

// $propertiesLocations is a php array of my searched locations which includes address, area_name, city, zip_code, country

<?php
$mark = ”;
foreach ($propertiesLocations  as $key => $propertyLocation) {
$mark .= ‘”‘.$propertyLocation->address.’ ‘.$propertyLocation->area_name.’ ‘.$propertyLocation->city.’ ‘.$propertyLocation->zip_code.’ ‘.$propertyLocation->country.'”‘;
if($key != count($propertiesLocations)-1){
$mark .= ‘,’;
}
}
?>

var addresslist = new Array(<?php echo $mark; ?>);

//addresslist becomes something like

//var addresslist = new Array(“2166 Broadway #18-B New York 10024 America”,”100 Overlook Terrace #11019 New York 10040 America”,”588 West End Avenue #12-C New York 10024 America”,”150 East 69th Street #6-D New York 10021 America”);

for(var i=0;i<addresslist.length;i++)
{
var address = addresslist[i];
geocoder.getLocations(address, addToMap);
}
}

function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
ew.openOnMarker(marker,html);
});
return marker;
}

var infoBoxContent= new Array();
var count=0;

// again $propertiesLocations is a php array of my searched locations which includes address, area_name, city, zip_code, country
<?php
foreach ($propertiesLocations  as $key => $propertyLocation) {
?>
var html_<?php echo $key; ?> = infoBox(‘<?php echo $propertyLocation->address; ?>’);
infoBoxContent.push(html_<?php echo $key; ?>)
<?php } ?>

// This function adds the point to the map

function addToMap(response)
{

// Retrieve the object
place = response.Placemark[0];

// Retrieve the latitude and longitude
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
// Center the map on this point
map.setCenter(point,11);

var markerIcon = new GIcon(G_DEFAULT_ICON);
markerIcon.image = “map_marker.png”;
markerIcon.infoWIndowAnchor = new GPoint(0,0);
// Create a marker
marker = new GMarker(point, markerIcon);
ew = new EWindow(map, E_STYLE_7);
map.addOverlay(ew);

var html = infoBoxContent[count];
count++

var marker = createMarker(point,html);
// Add the marker to map
map.addOverlay(marker);

// Close the EWindow if theres a map click
GEvent.addListener(map, “click”, function(overlay,point) {
if (!overlay) {
ew.hide();
}
});

// Add address information to marker
// marker.openInfoWindowHtml(place.address);
}

function infoBox(name) {
return ‘<div id=”mapInfo” class=”mapInfo”>’+name+'</div>’;
}

//]]>
</script>

<div id=”map” style=”width: 400px; height: 400px; border:1px solid #7C7C7C;”></div>