PDA

View Full Version : Google map is there but i can not see it



zeus-ajax
30 Oct 2009, 4:00 AM
my code is working properly but i can not see the Gmap becose it is behind the
other layers.
i can see that using firebug
any suggestions?

my code is the following:

html code


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>


<title>Complex Layout</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjsdfhdsjfhjsdhfdjsc_37FWm0t4j0FcK2CYDW89kBjkdjkfjsdkjfksdjfsGEDlAyYAIOCQ"
type="text/javascript"></script>


<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>


<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>




<!-- EXAMPLES -->
<script type="text/javascript" src="../shared/examples.js"></script>




<body onload="loadmap()" >


<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
<!--ARISTERA -->
<div id="west" class="x-hide-display">
<p>
address:<input type="text" size="10" id="addressInput"/> <br />
radius:<input type="text" size="4" id="radiusSelect"/>
<div id="searchFilters">
<div class="searchFiltersH">
<table id="searchFiltersTable" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="sfInput"><input id="F_restaurant" type="checkbox" value="F_restaurant_E" /></td>
<td class="sfLabel"><label>Restaurant</label></td>


<td class="sfInput"><input id="F_bar" type="checkbox" value="F_bar_E" /></td>
<td class="sfLabel"><label>Bar</label></td>
</tr>
<tr>
<td class="sfInput"><input id="F_kafeteria" type="checkbox" value="F_kafeteria_E" /></td>
<td class="sfLabel"><label>????</label></td>


<td class="sfInput"><input id="F_ouseri" type="checkbox" value="F_ouseri_E" /></td>
<td class="sfLabel"><label>??????</label></td>


</tr>
<tr>
<td class="sfInput"><input id="F_hotel" type="checkbox" value="F_hotel_E" /></td>
<td class="sfLabel"><label>??????????</label></td>


<td class="sfInput"><input id="F_moussiki" type="checkbox" value="F_moussiki_E" /></td>
<td class="sfLabel"><label>???????</label></td>
</tr>
<tr>
<td class="sfInput"><input id="F_rempetadiko" type="checkbox" value="F_rempetadiko_E" /></td>
<td class="sfLabel"><label>?????????</label></td>


<td class="sfInput"><input id="F_barMoussiki" type="checkbox" value="F_barMoussiki_E" /></td>


<td class="sfLabel"><label>Bar Restaurant</label></td>


</tr>
</table>
<table>
<tr><td></td><td></td></tr></table>
</div>
</div>
<input type="button" onclick="searchLocations()" value="search"/>
</p>
</div>
<!--ARISTERA -->


<!--KENTRO-->
<div id="map" class="x-hide-display">
<!--<div id="map" style=" overflow:visible; z-index: 0; width:100%; height:100%;" ></div>-->
<!--<div id="map" style=" overflow:visible; z-index: 0; width:400px; height:400px;" ></div>-->
</div>
<div id="center2" class="x-hide-display">
<!--<div id="map" style=" overflow:visible; z-index: 0; width:100%; height:100%;" ></div>-->
<a id="hideit" href="#">Toggle the west region</a>
<p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
</div>
<!--KENTRO-->


<div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">


</div>


<div id="south" class="x-hide-display">


<p>south - generally for informational stuff, also could be for status bar</p>
</div>


</body>
</html>
ext code


<script type="text/javascript">
Ext.onReady(function(){


function reloadTab()
{
var tab = tabs.getActiveTab();
var updater = tab.getUpdater();
updater.refresh();
}


// FORM A
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
// FORM B


// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
}
}), {
// lazily created panel (xtype:'panel' is default)
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title: 'South',
margins: '0 0 0 0'
}, {
region: 'east',
title: 'East Side',
collapsible: true,
split: true,
width: 225, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel so the title will be applied
new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 0, // second tab initially active
tabPosition: 'bottom',
items: [{
html: '<div id="sidebar"></div>',
title: '????????????',
autoScroll: true
}, new Ext.grid.PropertyGrid({
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
})
}, {
region: 'west',
id: 'west-panel', // see Ext.getCmp() below
title: '????????',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
layout: {
type: 'accordion',
animate: true
},
items: [{
contentEl: 'west',
title: '?????????',
border: false,
iconCls: 'nav', // see the HEAD section for style used






}, {
title: 'Settings',
html: '<p>Some settings in here.</p>',
border: false,
iconCls: 'settings'
}]
},
// ------------------------------------------------------------------------------------------
tabs = new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
split:true,
defaults: {hideMode: 'offsets'},
//defaults: {hideMode: 'nosize'},
activeTab: 0, // first tab initially active
//style:'background: transparent',
items: [{
contentEl: 'map',
//id:'map',
title: '?????? ?????????????::POI-Index',
layoutOnTabChange: true,
closable: false,
autoScroll: true,
},{
contentEl: 'center2',
title: 'Center Panel',
autoScroll: true,
}]


})


]
});


// ------------------------------------------------------------------------------------






// get a reference to the HTML element with id "hideit" and add a click listener to it
Ext.get("hideit").on('click', function(){
// get a reference to the Panel that was created with id = 'west-panel'
var w = Ext.getCmp('west-panel');
// expand or collapse that Panel based on its collapsed property state
w.collapsed ? w.expand() : w.collapse();
});


});
</script>

javascript code (simple-apostolos.js)





var map;
var geocoder;
// var address;


function loadmap() {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(38.00, 23.67), 14);
map.overlay = Ext.get('overlay');




GEvent.addListener(map, "click", getAddress);
geocoder = new GClientGeocoder();




}
}




function getAddress(overlay, latlng) {
if (latlng != null) {
address = latlng;
geocoder.getLocations(latlng, showAddress);
}
}


function showAddress(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Status Code:" + response.Status.code);
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);


var html = '<div id="searchFilters">' +
'<div class="searchFiltersH">' +
'<table id="searchFiltersTable" cellpadding="0" cellspacing="0" border="0">' +
'<tr>' +
'<td class="sfInput"><input id="F_restaurant" type="checkbox" value="F_restaurant_E" /></td>' +
'<td class="sfLabel"><label>Restaurant</label></td>' +


'<td class="sfInput"><input id="F_bar" type="checkbox" value="F_bar_E" /></td>' +
'<td class="sfLabel"><label>Bar</label></td>' +


'<td class="sfInput"><input id="F_kafeteria" type="checkbox" value="F_kafeteria_E" /></td>' +
'<td class="sfLabel"><label>????</label></td>' +


'<td class="sfInput"><input id="F_ouseri" type="checkbox" value="F_ouseri_E" /></td>' +
'<td class="sfLabel"><label>??????</label></td>' +


'</tr>' +


'<tr>' +
'<td class="sfInput"><input id="F_hotel" type="checkbox" value="F_hotel_E" /></td>' +
'<td class="sfLabel"><label>??????????</label></td>' +


'<td class="sfInput"><input id="F_moussiki" type="checkbox" value="F_moussiki_E" /></td>' +
'<td class="sfLabel"><label>???????</label></td>' +


'<td class="sfInput"><input id="F_rempetadiko" type="checkbox" value="F_rempetadiko_E" /></td>' +
'<td class="sfLabel"><label>?????????</label></td>' +


'<td class="sfInput"><input id="F_barMoussiki" type="checkbox" value="F_barMoussiki_E" /></td>' +
'<td class="sfLabel"><label>Bar Restaurant</label></td>' +


'</tr>' +


'</table><table>' +
"<tr><td></td><td><input type='button' value='??????' onclick='searchLocationsll()'/></td></tr></table>" +
'</div>' +
'</div>';


marker.openInfoWindowHtml(
'<b>?????/??????:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +
'<b>Address:</b>' + place.address + '<br>' +
'<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode + '<br />' +
"<table><tr>" +
"<td class=\"col1\">?????</td> <td><input type='text' id='name'/> </td>" +
"<td class=\"col1\">????????</td> <td><input type='text' id='N_radius'/> </td>" +
"</tr></table>" +
html);


}


}


function searchLocationsll() {
var name = escape(document.getElementById("name").value);
var radius = escape(document.getElementById("N_radius").value);


var restaurant = escape(document.getElementById("F_restaurant").value);
var bar = escape(document.getElementById("F_bar").value);
var kafeteria = escape(document.getElementById("F_kafeteria").value);
var ouseri = escape(document.getElementById("F_ouseri").value);


var hotel = escape(document.getElementById("F_hotel").value);
var barMoussiki = escape(document.getElementById("F_barMoussiki").value);
var moussiki = escape(document.getElementById("F_moussiki").value);
var rempetadiko = escape(document.getElementById("F_rempetadiko").value);


var latlng = marker.getLatLng();
var lat = latlng.lat();
var lng = latlng.lng();


searchLocationsNearll(lat, lng, radius);
}


function searchLocationsNearll(lat, lng, radius) {
var searchUrl = 'Gmap_Anasitissi_genxml.php?lat=' + lat + '&lng=' + lng + '&radius=' + radius + '&ll=1';
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');
map.clearOverlays();


var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(38.00, 23.67), 14);
//38.0041863,23.676943 map.setCenter(new GLatLng(40, -100), 4);
return;
}


var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute('name');
var address = markers[i].getAttribute('address');
var distance = parseFloat(markers[i].getAttribute('distance'));
var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
parseFloat(markers[i].getAttribute('lng')));


var marker = createMarker(point, name, address);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address, distance);
sidebar.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}








function searchLocations() {
var address = document.getElementById('addressInput').value;
geocoder.getLatLng(address, function(latlng) {
if (!latlng) {
alert(address + ' not found');
} else {
searchLocationsNear(latlng);
}
});
}


function searchLocationsNear(center) {
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'Gmap_Anasitissi_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');
map.clearOverlays();


var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(38.00, 23.67), 14);
//38.0041863,23.676943 map.setCenter(new GLatLng(40, -100), 4);
return;
}


var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute('name');
var address = markers[i].getAttribute('address');
var distance = parseFloat(markers[i].getAttribute('distance'));
var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
parseFloat(markers[i].getAttribute('lng')));

var marker = createMarker(point, name, address);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address, distance);
sidebar.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}


function createMarker(point, name, address) {
var marker = new GMarker(point);
var html = '<b>' + name + '</b> <br/>' + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}


function createSidebarEntry(marker, name, address, distance) {
var div = document.createElement('div');
var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}

php code


<?php
require("phpsqlajax_dbinfo.php");


// Get parameters from URL
$center_lat = $_GET["lat"];
$center_lng = $_GET["lng"];
$radius = $_GET["radius"];
$ll = $_GET["ll"];


// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);


// Opens a connection to a mySQL server
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
die("Not connected : " . mysql_error());
}


// Set the active mySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ("Can\'t use db : " . mysql_error());
}




//$ORAND .= "type = 'restaurant'";




// Search the rows in the markers table
//SELECT type, address, name, lat, lng, ( 3959 * acos( cos( radians('34.1341866') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('-118.406005') ) + sin( radians('34.1341866') ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < '1250' AND type = 'restaurant' ORDER BY distance LIMIT 0 , 20
if($ll == 1){
$query = sprintf("SELECT type, address, name, lat, lng, ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < '%s' ORDER BY distance LIMIT 0 , 20",
mysql_real_escape_string($center_lat),
mysql_real_escape_string($center_lng),
mysql_real_escape_string($center_lat),
mysql_real_escape_string($radius));
$filename="xzc";
$handle = fopen($filename, 'a');
fwrite($handle, $query);
}else{
$query = sprintf("SELECT address, name, lat, lng, ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < '%s' ORDER BY distance LIMIT 0 , 20",
mysql_real_escape_string($center_lat),
mysql_real_escape_string($center_lng),
mysql_real_escape_string($center_lat),
mysql_real_escape_string($radius));
}
$result = mysql_query($query);


if (!$result) {
die("Invalid query: " . mysql_error());
}


header("Content-type: text/xml");


// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name", $row['name']);
$newnode->setAttribute("address", $row['address']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
$newnode->setAttribute("distance", $row['distance']);
}


echo $dom->saveXML();
?>

VinylFox
30 Oct 2009, 4:36 AM
To start with, your 'map' div needs to have a width and height defined - this is a requirement of Google maps.

However....

Instead of using "contentEl: 'map'" for your Panel, why not use the GMapPanel UX?

zeus-ajax
30 Oct 2009, 10:50 AM
:)
Thank you for your help.
I found an answer for my problem. I change the line in



<div id="map" style=" overflow:visible; z-index: 0; width:100%; height:100%;" >

I dont use the GMapPanel UX because I dont know how to use it in order to write mine javascript functions in this manner.
Any suggestions are wellcome.

VinylFox
30 Oct 2009, 11:59 AM
What part exactly are you not sure of?

Here are a bunch of examples of using the GMapPanel UX (http://code.google.com/p/ext-ux-gmappanel/source/browse/#svn/trunk/examples)

zeus-ajax
30 Oct 2009, 1:11 PM
i read this
but
for example how can I realize the following



function loadmap() {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(38.00, 23.67), 14);
map.overlay = Ext.get('overlay');




GEvent.addListener(map, "click", getAddress); // this function getAddress
geocoder = new GClientGeocoder();




}
}




function getAddress(overlay, latlng) {
if (latlng != null) {
address = latlng;
geocoder.getLocations(latlng, showAddress);
}
}


function showAddress(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Status Code:" + response.Status.code);
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);


var html = '<div id="searchFilters">' +
'<div class="searchFiltersH">' +
'<table id="searchFiltersTable" cellpadding="0" cellspacing="0" border="0">' +
'<tr>' +
'<td class="sfInput"><input id="F_restaurant" type="checkbox" value="F_restaurant_E" /></td>' +
'<td class="sfLabel"><label>Restaurant</label></td>' +


'<td class="sfInput"><input id="F_bar" type="checkbox" value="F_bar_E" /></td>' +
'<td class="sfLabel"><label>Bar</label></td>' +


'<td class="sfInput"><input id="F_kafeteria" type="checkbox" value="F_kafeteria_E" /></td>' +
'<td class="sfLabel"><label>????</label></td>' +


'<td class="sfInput"><input id="F_ouseri" type="checkbox" value="F_ouseri_E" /></td>' +
'<td class="sfLabel"><label>??????</label></td>' +


'</tr>' +


'<tr>' +
'<td class="sfInput"><input id="F_hotel" type="checkbox" value="F_hotel_E" /></td>' +
'<td class="sfLabel"><label>??????????</label></td>' +


'<td class="sfInput"><input id="F_moussiki" type="checkbox" value="F_moussiki_E" /></td>' +
'<td class="sfLabel"><label>???????</label></td>' +


'<td class="sfInput"><input id="F_rempetadiko" type="checkbox" value="F_rempetadiko_E" /></td>' +
'<td class="sfLabel"><label>?????????</label></td>' +


'<td class="sfInput"><input id="F_barMoussiki" type="checkbox" value="F_barMoussiki_E" /></td>' +
'<td class="sfLabel"><label>Bar Restaurant</label></td>' +


'</tr>' +


'</table><table>' +
"<tr><td></td><td><input type='button' value='??????' onclick='searchLocationsll()'/></td></tr></table>" +
'</div>' +
'</div>';


marker.openInfoWindowHtml(
'<b>?????/??????:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +
'<b>Address:</b>' + place.address + '<br>' +
'<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode + '<br />' +
"<table><tr>" +
"<td class=\"col1\">?????</td> <td><input type='text' id='name'/> </td>" +
"<td class=\"col1\">????????</td> <td><input type='text' id='N_radius'/> </td>" +
"</tr></table>" +
html);


}


}

and in the general way, how can I implement mine functions