|
JavaScript - Google Map Icon Clustering ?
I can do php but not javascript very well so asking for help here
I have an existing google mapping solution for an online database, but as the database has grown we now need some form of clustering solution this site has the sort of solution I want (although I would like the change the icons to something more apt for our needs) http://google-maps-utility-library-v...d_example.html our current code snippet for the maps is as follows, any help how to add clustering with the number of entries within each cluster shown as a number inside the icon :- Code: echo "<table border=\"0\" width=\"100%\" height=\"800\" id=\"table1\">
<tr>
<td align=\"center\">
<script src=\"http://maps.google.com/maps?file=api&v=2&key=$apikey\" type=\"text/javascript\"></script>
<div id=\"map\" style=\"width: 100%; height: 100%; color:black\"></div ><br />
<div id='stmsg'></div><br />
<div id='streetview' style='width:800px;height:200px'></div>
<script type=\"text/javascript\">
//<![CDATA[
var icon = new GIcon();
icon.image = \"modules/Campsites/icons/marker.png\";
icon.iconSize = new GSize(25, 25);
icon.iconAnchor = new GPoint(9, 20);
icon.infoWindowAnchor = new GPoint(9, 2);
icon.infoShadowAnchor = new GPoint(18, 25);
var map,mm;
var gmarkers=[];
function createMarker(point,html,style)
{
// FF 1.5 fix
html = '<div align=\"left\" style=\"white-space:nowrap;\">' + html + '</div>';
icon.image = 'modules/$module_name/icons/' + style + '.png';
var marker = new GMarker(point, icon);
GEvent.addListener(marker, \"click\", function() {
//map.setCenter(marker.getLatLng());
marker.openInfoWindowHtml(html);
streetview.lat = marker.getLatLng().y;
streetview.lng = marker.getLatLng().x;
streetview.load();
});
return marker;
}
function loadMap()
{
map = new GMap2(document.getElementById(\"map\"),{ size: new GSize(800,600) });
map.disableDoubleClickZoom();
";
// if ( isset($_POST['lat'])&&isset($_POST['lng'])&&isset($_POST['zoom']))
// echo ("map.setCenter(new GLatLng(".$lat.",".$lng."),".$zoom.");");
//else{
if(isset($_SESSION["Xcord"]) && !empty($_SESSION["Xcord"]))
{
$dis=$_SESSION[totaldistance];
$zoom=5;
if(isset($_SESSION["townname"]) || isset($_SESSION["latitude"])){
if($dis<=10)
$zoom=11;
else if($dis<=20)
$zoom=10;
else if($dis<=30)
$zoom=9;
else if($dis<=40)
$zoom=9;
else
$zoom=8;
}
echo ("map.setCenter(new GLatLng(".$_SESSION["Xcord"].",".$_SESSION["Ycord"]."),$zoom);");
echo "streetview.lat='$_SESSION[Xcord]';streetview.lng='$_SESSION[Ycord]';";
}
else
echo ("map.setCenter(new GLatLng(53.69670647530323,-3.8232421875),6);");
//}
if((isset($_SESSION["townname"])||isset($_SESSION["latitude"])) && isset($_SESSION["Xcord"]) && !empty($_SESSION["Xcord"]) )
{
echo ("doDrawCircle(new GLatLng(".$_SESSION["Xcord"].",".$_SESSION["Ycord"]."),$_SESSION[totaldistance]);");
}
echo " mm = new GMarkerManager(map);
var latLng = map.getCenter();
document.typeform.lat.value=latLng.lat();
document.typeform.lng.value=latLng.lng();
document.typeform.zoom.value=map.getZoom();
document.countryform.lat.value=latLng.lat();
document.countryform.lng.value=latLng.lng();
document.countryform.zoom.value=map.getZoom();
//showAddress(\"Newquay\");
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl())
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
// Hides the info windows when the map is clicked
GEvent.addListener(map, \"dblclick\", function(overlay, latlng) {
if(!overlay)
{
mm.refresh();
map.clearOverlays();
// map.setZoom(9);
drawCircle(latlng,$userbrochureid,'$module_name');
map.addOverlay(streetview.marker);
}
});
GEvent.addListener(map, \"click\", function(overlay, latlng) {
if(!overlay)
{
mm.refresh();
map.clearOverlays();
drawCircle(latlng,$userbrochureid,'$module_name');
streetview.lat = latlng.y;
streetview.lng = latlng.x;
streetview.load();
}
});
// Store the longitude, latitude and zoom when the map is moved
GEvent.addListener(map, \"moveend\", function()
{
var latLng = map.getCenter();
document.typeform.lat.value=latLng.lat();
document.typeform.lng.value=latLng.lng();
document.typeform.zoom.value=map.getZoom();
document.countryform.lat.value=latLng.lat();
document.countryform.lng.value=latLng.lng();
document.countryform.zoom.value=map.getZoom();
}
);
// This is where we add the list of users to the map
";
if ( $row = $db->sql_fetchrow($result) )
{
do
{
if ( $row['XCoord'] == "")
{
// No location
}
else
{
$CampsiteName = $row['CampsiteName'];
$SubmittedBy = $row['SubmittedBy'];
$csid = $row['csid'];
$PhotoLink1 = $row['PhotoLink1'];
if($PhotoLink1!='') {
$userpic = "http://www.oursite.com/modules/$module_name/images/campsites/" . $row['PhotoLink1'];
} else {
$userpic='';
}
if($Type=="BROCHURE") {
$brochuredel="<a href=\"modules.php?name=$module_name&op=BrochureDel&csid=$csid&userbrochureid=$userbrochureid\"><img src=\"modules/$module_name/images/trash.gif\" title=\"Remove from Campsite Brochure\" border=\"0\"></a>";
}
$Town = $row['Town'];
$Colour = $row['Colour'];
$TelephoneNumber = $row['TelephoneNumber'];
$Type = $row['Type'];
$Details = "http://www.oursite.com/modules.php?name=$module_name&op=display_results&csid=$csid";
$XCoord = $row['XCoord'];
$YCoord = $row['YCoord'];
if (!preg_match("/[.]/", $XCoord)) {
$XCoord = stripslashes($row['XCoord']);
list($degrees,$minutes,$seconds) = explode(" ",$XCoord);
$minutesconverted=$minutes*60;
$totalseconds=$minutesconverted+$seconds;
$totalsecondsconverted=$totalseconds/3600;
$totalsecondsrounded = number_format($totalsecondsconverted, 6, ".", ",");
$degrees += 0;
list($rubbish,$totalsecondsrounded) = explode(".",$totalsecondsrounded);
$DecimalXCoord="$degrees" . "." . "$totalsecondsrounded";
} else {
$DecimalXCoord = $XCoord;
}
if (!preg_match("/[.]/", $YCoord)) {
$YCoord = stripslashes($row['YCoord']);
list($degrees,$minutes,$seconds) = explode(" ",$YCoord);
$minutesconverted=$minutes*60;
$totalseconds=$minutesconverted+$seconds;
$totalsecondsconverted=$totalseconds/3600;
$totalsecondsrounded = number_format($totalsecondsconverted, 6, ".", ",");
$degrees += 0;
list($rubbish,$totalsecondsrounded) = explode(".",$totalsecondsrounded);
$DecimalYCoord="$degrees" . "." . "$totalsecondsrounded";
} else {
$DecimalYCoord = $YCoord;
}
$userlat = $DecimalXCoord;
$userlong = $DecimalYCoord;
// Remove bad chars from the name and location
$CampsiteName = htmlspecialchars($CampsiteName, ENT_QUOTES);
$Town = htmlspecialchars($Town, ENT_QUOTES);
$SubmittedBy = htmlspecialchars($SubmittedBy, ENT_QUOTES);
$TelephoneNumber = htmlspecialchars($TelephoneNumber, ENT_QUOTES);
// Setup the marker colour
$iconstyle="marker";
if($Type == "CS") {
$iconstyle = "cs";
} elseif($Type=="CL") {
$iconstyle="cl";
} elseif($Type=="CCC") {
$iconstyle="ccc";
} elseif($Type=="CC") {
$iconstyle="cc";
} elseif($Type=="Wild Camping Spot") {
$iconstyle="wild";
} elseif($Type=="Parking Place") {
$iconstyle="pp";
} elseif($Type=="Independent") {
$iconstyle="ind";
} elseif($Type=="Aire") {
$iconstyle="aire";
} elseif($Type=="Aree Di Sosta") {
$iconstyle="aree";
} elseif($Type=="Stellplatz") {
$iconstyle="stellplatz";
} elseif($Type=="Municipal") {
$iconstyle="mun";
} elseif($Type=="FP") {
$iconstyle="fp";
}elseif($Type=="CCheq") {
$iconstyle="cheq";
}elseif($Type=="Pub Stopover") {
$iconstyle="pubstop";
}
if ($username==$SubmittedBy) {
$modlink = "<a href=\"modules.php?name=$module_name&op=modify&csid=$csid\"><img src=modules/Campsites/images/book_edit.gif align=\"absmiddle\" border=0 title=\"Edit $CampsiteName\"></a>";
} elseif(is_deputyadmin($user)) {
$modlink = "<a href=\"modules.php?name=$module_name&op=modify&csid=$csid\"><img src=modules/Campsites/images/book_edit.gif align=\"absmiddle\" border=0 title=\"Edit $CampsiteName\"></a>";
} else {
$modlink='';
}
if($userpic!='') {
$markertext = "<table border=\"0\" width=\"300\" cellspacing=\"0\" cellpadding=\"0\" id=\"mapinfo\"><tr><td width=\"80\" valign=\"top\"><img width=\"80\" border=\"0\" src=\"$userpic\" align=\"left\"></td>";
$markertext.= "<td>Type: <b>$Type</b><br>";
$markertext.= "Name:<b>$CampsiteName</b><br>";
$markertext.= "Town: <b>$Town</b><br>";
$markertext.= "Phone:<b>$TelephoneNumber</b><br>";
$markertext.= "Submitted By: <b>$SubmittedBy</b><br>";
$markertext.= "Full Details: <b><a rel="nofollow" target=blank.html href=$Details>Click HERE</a><br>";
$markertext.= "$modlink <a href=\"modules.php?name=$module_name&op=BrochureAdd&csid=$csid&userbrochureid=$userbrochureid\"><img src=\"modules/$module_name/images/add_to_brochure.gif\" title=\"Add to Virtual Campsite Brochure\" border=\"0\"></a> $brochuredel <a href=\"javascript:void(0)\" onclick=\"route.showForm(\'$DecimalXCoord,$DecimalYCoord\')\">Get Directions</a></td></tr></table>";
} else {
$markertext = "<table border=\"0\" width=\"300\" cellspacing=\"0\" cellpadding=\"0\" id=\"mapinfo\">";
$markertext.= "<tr><td>Type: <b>$Type</b>";
$markertext.= "<br>Name:<b>$CampsiteName</b>";
$markertext.= "<br>Town: <b>$Town</b>";
$markertext.= "<br>Phone: <b>$TelephoneNumber</b>";
$markertext.= "<br>Submitted By: <b>$SubmittedBy</b>";
$markertext.= "<br>Full Details: <b><a href=$Details>Click HERE</a><br>$modlink <a href=\"modules.php?name=$module_name&op=BrochureAdd&csid=$csid&userbrochureid=$userbrochureid\"><img src=\"modules/$module_name/images/add_to_brochure.gif\" title=\"Add to Virtual Campsite Brochure\" border=\"0\"></a> $brochuredel <a href=\"javascript:void(0)\" onclick=\"route.showForm(\'$DecimalXCoord,$DecimalYCoord\')\">Get Directions</a></td></tr></table>";
}
echo "var point = new GPoint($userlong, $userlat);";
echo "var marker = createMarker(point, '$markertext', '$iconstyle' , 'tooltip');";
echo "map.addOverlay(marker);";
}
}
while ( $row = $db->sql_fetchrow($result) );
echo "mm.addMarkers(gmarkers,1,17);";
}
echo "
streetview.load();
}
// arrange for our onload handler to 'listen' for onload events
if (window.attachEvent)
{
window.attachEvent(\"onload\", function()
{
loadMap(); // Internet Explorer
}
);
}
else
{
window.addEventListener(\"load\", function()
{
loadMap(); // Firefox and standard browsers
}, false);
}
function showAddress(address)
{
var geocoder = new GClientGeocoder();
geocoder.getLatLng(address,
function(point)
{
if (!point)
{
alert(address + \" not found\");
}
else
{
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
//]]>
</script>
</td>
</tr>
</table>
";
?>
Similar TutorialsWe got a google maps with a bunch of pins. Each pin is setup to use our blue custom icon image. I'm trying to make it so that when you click on a pin, that particular pin changes to a green version of the icon, and all the reset stay blue. If the user clicks another pin, it turns green and the previous goes back to blue. Basicly only the clicked active pin should be green. Code: google.maps.event.addListener(markers[indx], 'click', function() {
this.setIcon("/images/greenmarker.png");
});
Here is my code so far that will change the clicked pin into a green version. My problem is all attempts to change all pins back to blue prior to changing this clicked pin to green fails bad. Anyone know how to do this or point me in the right direction? Hi I have the following code to insert a google map of the UK into my page with some markers on it. This is fine except I want to change the icon to a simple flat spot. I'm sure this is easy and I have actually managed this before when there was only one marker on the map. I can't figure out how to do it on this example though. Any help would be appreciated. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>map test</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 606px; height: 750px"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var map = new GMap2(document.getElementById("map"));
map.setMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(54.57951, -4.41387), 6);
map.addControl(new GHierarchicalMapTypeControl());
map.addControl(new GSmallMapControl());
var point = new GLatLng(51.34699,-2.25413);
var marker = createMarker(point,'blah blah blah')
map.addOverlay(marker);
var point = new GLatLng(53.05912,-2.69214);
var marker = createMarker(point,'blah blah blah')
map.addOverlay(marker);
var point = new GLatLng(54.60522,-2.00281);
var marker = createMarker(point,'blah blah blah')
map.addOverlay(marker);
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
</body>
</html>
----------SOLUTION---------- ----------ORIGINAL PROBLEM---------- The second line of code. What does it do? It's confusing because it doesn't have a semicolon at the end and it doesn't end with (). Code: var centreicon = new GIcon(); centreicon.constructor centreicon.image = "http://maps.google.com/mapfiles/kml/pal3/icon31.png "; centreicon.shadow = "http://maps.google.com/mapfiles/kml/pal3/icon31s.png "; centreicon.iconSize = new GSize(12, 20); centreicon.shadowSize = new GSize(22, 20); centreicon.iconAnchor = new GPoint(6, 20); centreicon.infoWindowAnchor = new GPoint(5, 1); I found this on stackoverflow while trying to find a way to make my own icons on a map. With that being said. I'm still confused about how to apply the new graphic to a map. I don't see how they apply that picture to a coordinate. Does anyone know how to do that? Can I do this? Code: var centreicon = new GIcon(); centreicon.constructor centreicon.image = "http://maps.google.com/mapfiles/kml/pal3/icon31.png "; centreicon.shadow = "http://maps.google.com/mapfiles/kml/pal3/icon31s.png "; centreicon.iconSize = new GSize(12, 20); centreicon.shadowSize = new GSize(22, 20); centreicon.iconAnchor = new GPoint(6, 20); centreicon.infoWindowAnchor = new GPoint(5, 1); var marker = new GMarker( new GLatLng(-34.397, 150.644) , centreicon); map.addOverlay(marker); -------- A tad bit later -------- So this is the code I have on my testing site Even thought I'ved defined the the icon's image and location It does not show up on the map. What am I missing? Code: <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAWhjy3iZ8g6BZszj299c0yUY6ahKpSr1U&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var centreicon = new GIcon();
centreicon.constructor
centreicon.image = "http://maps.google.com/mapfiles/kml/pal3/icon31.png ";
centreicon.shadow = "http://maps.google.com/mapfiles/kml/pal3/icon31s.png ";
centreicon.iconSize = new GSize(12, 20);
centreicon.shadowSize = new GSize(22, 20);
centreicon.iconAnchor = new GPoint(6, 20);
centreicon.infoWindowAnchor = new GPoint(5, 1);
var marker = new GMarker( new GLatLng(-34.397, 150.644) , centreicon);
map.addOverlay(marker);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
I have a page with a GoogleMap with a GoogleBar and I would like the GoogleBar to appear with something written in it already and to have that search executed. In other words, I would like to "write something to the GoogleBar and press Enter" automatically as soon as the map loads. How can I do this? btw: By GoogleBar, I mean the search bar that appears on the map after using the enableGoogleBar() function. Hi everyone, I was trying to add a text popup box on my page, and this code helped me but I need to add a close icon (which is an image in my code).. but it doesn't work! :/ here is my code: Code: function show_hide_box(an, width, height, borderStyle) {
if (navigator.userAgent.indexOf("MSIE") != -1) {
var browserIsIE = true;
} else { browserIsIE = false; }
var href = an.href;
var boxdiv = document.getElementById(href);
if (boxdiv != null) {
if (boxdiv.style.display=='none') {
move_box(an, boxdiv);
boxdiv.style.display='block';
} else
boxdiv.style.display='none';
return false;
}
boxdiv = document.createElement('div');
boxdiv.setAttribute('id', href);
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.backgroundColor = '#FFF';
var inClosebox = document.createElement("div");
inClosebox.setAttribute('id', 'Close');
inClosebox.style.position = 'absolute';
if (browserIsIE) {
inClosebox.style.left = '-1px';
inClosebox.style.top = '0px';
} else {
inClosebox.style.left = '-15px';
inClosebox.style.top = '-15px';
}
inClosebox.style.visibility = 'hidden';
var inImage2 = document.createElement("img");
inImage2.onclick = function () { this.document.close(); };
inImage2.setAttribute('src', '../../Images/closebox.png');
inImage2.setAttribute('width', '30');
inImage2.setAttribute('height', '30');
inImage2.setAttribute('border', '0');
inImage2.style.cursor = 'pointer';
inClosebox.appendChild(inImage2);
var contents = document.createElement('iframe');
contents.scrolling = 'yes';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
contents.src = href;
boxdiv.appendChild(contents);
boxdiv.appendChild(inClosebox);
document.body.appendChild(boxdiv);
move_box(an, boxdiv);
return false;
}
can any help me please? below code is not working for IE7. function closeWindowFun(e){ winX = navigator.appName=="Microsoft Internet Explorer" ? window.event.clientX : event.screenX; winY =navigator.appName=="Microsoft Internet Explorer" ? window.event.clientY :event.screenY; temp=navigator.appVersion.split("MSIE"); version=parseFloat(temp[1]); alert(version); closeFlg=false; if(version>=7){ if ((window.event.clientY < 0 && (window.event.clientY >-20 || window.event.clientY <-100)) && (window.event.clientX > (document.documentElement.clientWidth - 5) || window.event.clientX < 15) ){ loseFlg=true; } } else{ if(winX<0 && winY<0){ closeFlg=true; } } if(closeFlg){ window.opener.location .reload(); window.close(); } } please give me suggestions Hi, I'm not sure where I have translated this incorrectly. I have one google map embedded on my page which works fine. But I wanted to add a second one. I thought the easiest way to do this would be to have a second page which is called later on with all the details on it for the second map. However although I think (this I presume is where I went wrong) I have replicated the instructions correctly the place holder for the second map just remains blank. This is the code for my called page with the instructions for the second map: PHP Code: <?php echo $_POST['Map'] . '<br />'; ?> <div id="placemap_canvas"></div> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html {height:250px} body {height:250px} #placemap_canvas {width:100%; height:150px;} </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" /> </script> <script type="text/javascript"> var latlng = new google.maps.LatLng ( <?php include("dbconnect.php"); $result = mysql_query("SELECT * FROM regions WHERE RegionPId='{$_POST['Map']}'"); while($row = mysql_fetch_array($result)){ echo $row['maplink']; } mysql_close($con); ?> ); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("placemap_canvas"), myOptions); } </script> And this is the script of the main page, just in case I would be better off keeping them both in one place. Code: <head>
<script type="text/javascript">
function loadSubPlace(File,ID,Msg,Eile,EID,Esg){
loadXMLDoc1(File,ID,Msg);
var mimer = setTimeout(function(){loadXMLDoc1(Eile,EID,Esg)},5000);
}
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {height:250px}
body {height:250px}
#map_canvas {width:30%; height:250px;}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true" />
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng (
<?php
include("dbconnect.php");
$result = mysql_query("SELECT * FROM countries
WHERE Country='{$_SESSION['Country']}'");
while($row = mysql_fetch_array($result)){
echo $row['Map'];
}
mysql_close($con);
?>);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div class="countryright" id="map_canvas">
include("dbconnect.php");
$snowball=explode(';',$_POST['syringa']);
$turnsol=$snowball[1];
$violet =$snowball[2];
$wakerobin=$snowball[3];
global $turnsol;
global $violet;
global $wakerobin;
echo '<center><b><big>' . $wakerobin. '</big></b></center><br /><br />';
$result=mysql_query("SELECT * FROM regions
WHERE country='{$turnsol}' AND region='{$violet}' AND place='{$wakerobin}' AND sub !=''
ORDER BY sub ASC");
while($row = mysql_fetch_array($result)){
$wheat="{$row['RegionPId']};{$turnsol};{$violet};{$wakerobin};{$row['sub']}";
$tigerlilly=$row['RegionPId'];
echo '<input type="button" class="button3" name="place" id="place" value="' . $row['sub'] . '" onclick="loadSubPlace(\'getPlace.php\',\'txtHintPlaceSub\',\'hepatica=' . urlencode($wheat) . '\',\'getPlaceMap.php\',\'placemapcanvas\',\'Map=' . urlencode($tigerlilly) . '\');" />';
}
echo '<input type="button" class="button3" name="addplace" id="addplace" value="Add Place" onclick="loadXMLDoc1(\'getAddPlaceSub.php\',\'txtHintPlaceSub\', encodeURI(\'addsubplace=' . $_POST['syringa'] . '\'));" />';
echo '<br /><br /><div id="txtHintPlaceSub"></div><br /><br />';
mysql_close($con);
?>
I've cut out the script that doesn't relate to this so I hope I haven't missed anything important. Hello, I have a tool in my app where a user can perform a search, and it will use AJAX to deliver the results into a small box, in JSON format. When a user submits a search, a spinning gif will appear as the query is running. A javascript function is then meant to remove the gif and display the results once ready. In IE, however, this fails to happen, and the gif is locked in place, preventing the results from being displayed. I have no experience with javascript and am a bit unsure what to do. Tried to use IE's script debugger, but got totally confused. The script is much longer than this, but I think this is the problematic area: Code: 'beforeSend': function(r) {
ul.find('li').remove();
ul.html('<li class="center"><img src="/images/ajax-loader.gif" /></li>');
},
'success': function(r) {
ul.find('li').remove();
h = ''
$(r).each(function(k,r0){
h = h + '<li data-id="'+r0.value+'" data-icon_url="'+r0.icon_url+'">'+r0.label+'</li>';
});
For some reason, in IE only, it will clear the contents and display the gif upon submitting a search. But then it won't clear the gif and display the results. Any ideas? I would be so appreciative. Thank you. Greg I am a beginner with coding and have no idea what I'm doing. Hopefully I'm posting this on the right forum. I have just registered a domain for my business and am maintaining my webpage through tumblr. I have stumbled around into finding a code that will allow me to hide/collapse certain content. The problem is that I want it to become an icon that changes from a "plus" to a "minus" sign, or any one character to another, as opposed to having it be the title that gets clicked on in order to be expanded. One major issue I'm having revolves around content expanding where a link is displayed. I am coding this on the "links" section of my page, which is links to other businesses and webpages I support. So, for example, I'll have a link to a business, and the hidden content will be something I have to say about it, that the person viewing can chose to read by clicking to expand content. I want it hidden by default to take up less space. This is the code I put into my head section: <!-- COLLAPSIBLE TEXT --> <!-- This goes into the HEAD of the html file --> <script language="JavaScript" type="text/javascript"> <!-- Copyright 2005, Sandeep Gangadharan --> <!-- For more free scripts go to http://www.sivamdesign.com/scripts/ --> <!-- if (document.getElementById) { document.writeln('<style type="text/css"><!--') document.writeln('.texter {display:none} @media print {.texter {display:block;}}') document.writeln('//--></style>') } function openClose(theID) { if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" } else { document.getElementById(theID).style.display = "block" } } // --> </script> And this is what the html looks like, which I've placed within a table (the list of businesses/pages I support or recommend): <td width=[]> <h2><u>[list name]</u></h2> <p> <a href="http://[link to business].com">[name]</a> <br> <div onClick="openClose('a3')" style="cursor:hand; cursorointer">∇</div> <div id="a1" class="texter"><font style="font-size:90%" color="maroon"> [hidden content]</font></p></div> Is is possible for me to place some kind of code where I have the ∇ that will switch between two icons when shown/hidden? Do I have to use a completely different script? Also, is it possible to keep both a link and a toggle icon on the same line without a break, yet have them lead to different places? Maybe this is more difficult than I think it should be, but I really cant find a good script on the internet for this. Any help would be appreciated. Thanks. I wish to add a help icon to variousd parts of my pages that places an overlay text box for the help that that help icon relates to. maybe a call like help(datefield) or help(somethingelse) then the script that shows the help text shows the text that relates to the string passed. can someone please provide information on how i can do this. I am asking a pretty simple question, but you got to start learning somewhere, you know! Anyway, I have implemented a script that resizes images into small thumbs on the left side of a page and shows the full size image on the right when the user click on a thumb. It works well. However, I have a possible 10 thumbs on theleft and my database that feeds this does not always have 10 images. Since I re-use the page for mutiple listings, I need to find a way to disable the broken image link for listings that don't have 10 thumbs. I have attached a picture of what it looks like. Here is the script: Code: #jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float:left; display: block; height:60px; width:60px; overflow:hidden; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { height:60px; width:auto; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
</style>
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<script type="text/javascript">
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
enlargedImg = document.createElement('img');
document.getElementById('jgal').parentNode.insertBefore(enlargedImg,document.getElementById('jgal').nextSibling);
enlargedImg.src = li[0].getElementsByTagName('img')[0].src;
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].style.backgroundRepeat = 'no-repeat';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
enlargedImg.src = this.getElementsByTagName('img')[0].src;
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
And then my list basically looks like this: Code: <ul id="gallery">
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb5']; ?>" alt="<?php echo $row_WADAitems['ItemDesc5']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb6']; ?>" alt="<?php echo $row_WADAitems['ItemDesc6']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb7']; ?>" alt="<?php echo $row_WADAitems['ItemDesc7']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb8']; ?>" alt="<?php echo $row_WADAitems['ItemDesc8']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb9']; ?>" alt="<?php echo $row_WADAitems['ItemDesc9']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb10']; ?>" alt="<?php echo $row_WADAitems['ItemDesc10']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb11']; ?>" alt="<?php echo $row_WADAitems['ItemDesc11']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb12']; ?>" alt="<?php echo $row_WADAitems['ItemDesc12']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb13']; ?>" alt="<?php echo $row_WADAitems['ItemDesc13']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb14']; ?>" alt="<?php echo $row_WADAitems['ItemDesc14']; ?>"></li>
</ul>
So as you can see, if I don't have an image in the database that it pulls from, I get that icon for a broken image link. How can I remove that icon so it doesn't show the no image icon? Many thanks! Edit2:: This is what I got to work. Code: <INPUT class=touch type=button value='UP' onMouseDown="up=true;" onMouseUp="up=false;"> <INPUT class=touch type=button value='DOWN' onMouseDown="down=true;" onMouseUp="down=false;"> Then added a check to see if (up==true) {move up code} else if (down==true) {move down code} etc Edit:: Basically Code: <INPUT class=touch type=button value='38' onMouseDown="movingUP();"> Then in JS Code: function movingUP(){
window.event.keyCode = 38;
}
But what do I put in movingUP() to send keyCode 38 when while the button is being clicked????????????????????? Trying to add 8 icons of W,A,S,D, LEFT, RIGHT, UP, DOWN which upon click/touch will input the relative command to the screen canvas for mobiles that don't have a keyboard. They aren't clicking on the canvas. I need some buttons/icons/images outside the canvas probably in a div, that send input events as an alternative to a keyboard...Something that can be clicked and held down to repeatedly spam that key to walk in that direction. I have script to click icons from a keyboard and output the clicked key to a text field, but I don't know how to tie it into my keyboard listener in my game.. My game code uses: Code: // Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
Then elsewhere I can trigger events when keysDown contains the number of a key that triggers an item like: Code: if (38 in keysDown && hero.y > 0 ) { // Player holding UP key
//walk north code here
}
Is there a simple way to click on a button and send the "UP" keyCode to the entire screen? Particularly the canvas element......Or get it into my keysDown[e.keyCode]; I found this: Quote: function addKey(cKey) { d = document.forms["foo"].elements["bar"]; d.value = (cKey.value=='backspace') ? d.value.slice(0,-1) : d.value+cKey.value; } //elsewhere in html body <INPUT class=touch type=button value=w onClick="addKey(this)"> which will send 'w' when clicked, and I tried to send '38' instead but it only sends it to 1 element and not the entire screen....so it shows 38 in a text box each time I click it but it doesn't actually send 38 to keys being pressed. Is there a simple way to do this? I wanted to add a fire button and others I figured I could just put an image with an event but can't figure it out.... Hello all, Essentially what I am trying to get without much success on the issue is this: I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window. This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason. I am obliged for any help on this. *edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though. Can the Google API replace scraping? You can get blocked by Google if you scrape, but can you get the same info from the Google API at no risk?
How do I show the default icon for pdf, doc, etc... else show the image? Code: Show the default icon for pdf, doc, etc... else show image. Default icon: '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' + The image: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0"></a>' + Attempted javascript onError but only certain browsers support that or it's my code. Code: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0" onerror="this.src=images/icons/' + sIcon + '.gif"></a>' + Any ideas? Hey all I'm quite a newbie at javascript and I'm trying to have links to google maps markers. I have a page with my embeded google maps on it and some markers. What I'm basically looking to do is have a web page with a menu down the side and when you click the menu items, the google maps markers would pop up on the map. For example, city attractions down a side menu and when you click say restaurants, the markers would pop up the location restaurants in a certain place, then you could click pubs and the restaurant markers would dissapear and the pub markers would appear. Can anyboy help me with this or even direct me to some code that would help. Thanks all. Hey I'm quite new at javascript and am currently in the process of creating a site that embeds google maps using an xml document. What I'm trying to do is categories the markers on my map. I am trying to make it so there are check boxes at the bottom and when i check the boxes, i.e. theatres, the markers will appear for the theatres and disappear when unchecked. Using some example code i have modified, i have so far got the maps to pickup the markers from the xml with the check boxes but the markers are all just on the page and the check boxes dont do anything and I am stuck as to of why. here's my code: Code: <!DOCTYPE HTML>
<html>
<head>
<title>Google Maps</title>
<script src="mykey"></script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<table border=1>
<tr>
<td>
<div id="map" style="width: 550px; height: 450px"></div>
</td>
<td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div>
</td>
</tr>
</table>
<form action="#">
Theatres: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" />
Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" />
Tourist Information: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br />
</form>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</body>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var side_bar_html = "";
var gmarkers = [];
var map = null;
function createMarker(point,name,html,category) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
marker.mycategory = category;
marker.myname = name;
gmarkers.push(marker);
side_bar_html += '<a href="javascript<b></b>:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
return marker;
}
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}
document.getElementById(category+"box").checked = true;
}
ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
document.getElementById(category+"box").checked = false;
that we just hid
infowindow.close();
}
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
makeSidebar();
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i],"click");
}
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 53.8363,-3.03771), 11);
GDownloadUrl("categories.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var address = markers[i].getAttribute("address");
var name = markers[i].getAttribute("name");
var html = "<b>"+name+"<\/b><p>"+address;
var category = markers[i].getAttribute("category");
// create the marker
var marker = createMarker(point,name,html,category);
map.addOverlay(marker);
}
document.getElementById("side_bar").innerHTML = side_bar_html;
show("theatre");
hide("golf");
hide("info");
});
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
</body>
</html>
If anybody help with this and tell me where I am going wrong, it would be much appreciated. thanks Hi guys, I'm trying to run this sample file that i got from the google docs. I want to write a stock ticker from google finances xml feed and this is a sample they had. Code: <?xml version="1.0" encoding="utf-8"?>
<Module>
<ModulePrefs title="hellofinance">
<Require feature="finance"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
Hello world!
Here is your portfolio:<br/>
GOOG: <span id=_IG_SYM1_l></span> (<span id=_IG_SYM1_c></span>)<br/>
AAPL: <span id=_IG_SYM2_l></span> (<span id=_IG_SYM2_c></span>)<br/>
INTC: <span id=_IG_SYM3_l></span> (<span id=_IG_SYM3_c></span>)<br/>
<script>
var quote = new google.finance.Quote();
quote.enableDomUpdates( { 'GOOG' : '_IG_SYM1', 'AAPL' : '_IG_SYM2',
'INTC' : '_IG_SYM3' } );
quote.getQuotes(["GOOG", "AAPL", "INTC"]);
</script>
]]>
</Content>
</Module>
my problem is i don't know how to execute it so i can see how it works. I tried sticking this code within a php file and it returns an error on the first line for unexpected t-string. So i tried changing the extension to xml and it just displays the code but does not execute. I'm stumped. Any help is appreciated. Thanks P.S. - Yes i do have the zend gdata framework installed and running on my server and is working correctly according to their test. Hi, I have just set up google analytics on my website but it is showing tracking unknown symbol in the status. Is it just the case of it taking time to set up or should it work straight away. Thanks Tyler Hello Everyone! I'm new to the forums but have a question with Google Translate I'm trying to add to my site. I believe the code for Google Translate is a Java Script and I'd like to put this on my website in the side column. The only thing I would like to modify is a <br> (break) between the Powered by and Google Translate. So I would like it to be center aligned like: Powered by Google Translate Right now it is stretching out the column because of the added space and frustrating me! Any idea how to do this? Here is the code: Code: <div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
My knowledge of javascript and coding in general is very very limited so any changes you make or where I should put the code, definitely let me know Thanks, Phil |
|||||||