I'm trying to get the google maps for websites API working on my php website. for that I have a php page that loads users variables for the maps. the javascript works fine in the webpage with default values, but I'm not able to load the $php variable into the script.
maybe some javascript expert can give a hand
function onProfileDisplay() {
$user = CFactory::getRequestUser();
$document =& JFactory::getDocument();
$document->addStyleSheet($css);
$my = CFactory::getUser();
$pluginParams = $this->params;
$param = new stdClass;
$param = $Lat = $pluginParams->get('Lat');
$param = $Lng = $pluginParams->get('Lng');
$param = $width = $pluginParams->get('width');
$param = $height = $pluginParams->get('height');
$param = $zoom = $pluginParams->get('zoom');
return '<body onload="onprofileDisplay()"> <div id="map_canvas" style="width:800px; height:500px"></div>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function onProfileDisplay() {
var latlng = new google.maps.LatLng(57.0442, 9.9116);
**var zoom = <?php echo ($zoom) ?>;**
var settings = {
**zoom: zoom,**
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
title:"Some title"
});
}
</script>
';
}
to test I'm only trying to load the php variable $zoom into the javascript, but it does not work, inside the javascript:
var zoom = <?php echo ($zoom) ?>;
zoom: zoom,
but it does not work, if I change the javascript to original remove var zoom = ; zoom: 15, then it works but with static default values
Help appreciated.
This is the outuput code:
<script type="text/javascript">
function onProfileDisplay() {
var latlng = new google.maps.LatLng(57.0442, 9.9116);
var zoom = ".$zoom.";
var settings = {
".$zoom.":".$zoom.",
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
});
}
</script>
The original code looks like:
public function onProfileDisplay() {
$user = CFactory::getRequestUser();
$document =& JFactory::getDocument();
$document->addStyleSheet($css);
$my = CFactory::getUser();
$pluginParams = $this->params;
$param = new stdClass;
$param = $api_key = $pluginParams->get('api_key');
$param = $Lat = $pluginParams->get('Lat');
$param = $Lng = $pluginParams->get('Lng');
$param = $width = $pluginParams->get('width');
$param = $height = $pluginParams->get('height');
$param = $zoom = $pluginParams->get('zoom');
return '<body onload="onProfileDisplay()">
<div id="map_canvas" style="width:800px; height:500px"></div
</body>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function onProfileDisplay() {
var latlng = new google.maps.LatLng(57.0442, 9.9116);
var zoom = ".$zoom.";
var settings = {
".$zoom.":".$zoom.",
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
});
}
</script>';
}
}
?>
google-maps
