Saturday, 24 August 2013

Google Map not displayed in Ajax process

Google Map not displayed in Ajax process

With this code Im displaying google map in my index.php page:
<!--[if IE]>
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Include Google Maps JS -->
<script
src="http://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&sensor=true"
type="text/javascript"></script>
$indirizzo = "corso Buones Aires";
$comune = "Milano";
$map = new simpleGMapAPI();
$geo = new simpleGMapGeocoder();
$map->setWidth(332);
$map->setHeight(250);
$map->setBackgroundColor('#d0d0d0');
$map->setMapDraggable(true);
$map->setDoubleclickZoom(true);
$map->setScrollwheelZoom(true);
$map->showDefaultUI(true);
$map->showMapTypeControl(true, 'DEFAULT');
$map->showNavigationControl(true, 'DEFAULT');
$map->showScaleControl(true);
$map->showStreetViewControl(false);
$map->setZoomLevel(9);
$map->setInfoWindowBehaviour('SINGLE_CLOSE_ON_MAPCLICK');
$map->setInfoWindowTrigger('CLICK');
$map->addMarkerByAddress($indirizzo . " " . $comune, $indirizzo,
$indirizzo, "http://google-maps-icons.googlecode.com/files/villa.png");
echo $map->showMap(false);
this code works great, but if I try to get google map in ajax process, I
cant displayed it.
In others words, if I place above code in map.php page
<?php
require("../inc/config.php");
echo " <!--[if IE]>\n";
echo " <script
src=\"http://html5shim.googlecode.com/svn/trunk/html5.js\"></script>\n";
echo " <![endif]-->\n";
echo " <!-- Include Google Maps JS -->\n";
echo " <script
src=\"http://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&sensor=true\"
type=\"text/javascript\"></script>";
if($_POST["comune"])
{
$indirizzo = "corso Buones Aires";
$comune = $_POST["comune"];
$map = new simpleGMapAPI();
$geo = new simpleGMapGeocoder();
$map->setWidth(332);
$map->setHeight(250);
$map->setBackgroundColor('#d0d0d0');
$map->setMapDraggable(true);
$map->setDoubleclickZoom(true);
$map->setScrollwheelZoom(true);
$map->showDefaultUI(true);
$map->showMapTypeControl(true, 'DEFAULT');
$map->showNavigationControl(true, 'DEFAULT');
$map->showScaleControl(true);
$map->showStreetViewControl(false);
$map->setZoomLevel(9);
$map->setInfoWindowBehaviour('SINGLE_CLOSE_ON_MAPCLICK');
$map->setInfoWindowTrigger('CLICK');
$map->addMarkerByAddress($indirizzo . " " . $comune, $indirizzo,
$indirizzo,
"http://google-maps-icons.googlecode.com/files/villa.png");
echo $map->showMap(false);
}
?>
and call this page using jquery:
$(document).ready(function(){
$("#spanComune").change(function(){
var $body = $("body"),
comune=$("#spanComune option:selected").text();
$body.addClass("loading");
$.ajax({
type:"POST",
url:"ajax/map.php",
data: "comune="+comune,
success:function(data){
$("#spanMappa").empty().html(data);
$body.removeClass("loading");
}
});
});
});
In index.php:
<div id="spanMappa"></div>
Google Map is not displayed. Very strange issue! How Can I solve this?

No comments:

Post a Comment