Hello guys, Im newbie to Java, but Im trying to make project, where players will register to my database and showed on map under two categories. Problems is, that my code doesnt works and i dont know why…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Javascript API v3 Example: Marker Categories</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<title>Google Maps</title>
<?php $db = mysql_connect("127.0.0.1","root","");
mysql_select_db("loldb", $db); ?>
<style type="text/css">
html, body { height: 100%; }
</style>
<script type="text/javascript">
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
var gmarkers = [];
var gicons = [];
var map = null;
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
gicons["red"] = new google.maps.MarkerImage("mapIcons/marker_red.png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png',
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(9, 34));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
function getMarkerImage(iconColor) {
if ((typeof(iconColor)=="undefined") || (iconColor==null)) {
iconColor = "red";
}
if (!gicons[iconColor]) {
gicons[iconColor] = new google.maps.MarkerImage("mapIcons/marker_"+ iconColor +".png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 6,20.
new google.maps.Point(9, 34));
}
return gicons[iconColor];
}
function category2color(type) {
var color = "red";
switch(type) {
case "cz": color = "blue";
break;
case "sk": color = "green";
break;
default: color = "red";
break;
}
return color;
}
gicons["cz"] = getMarkerImage(category2color("cz"));
gicons["sk"] = getMarkerImage(category2color("sk"));
// A function to create the marker and set up the event window
function createMarker(point,nick,html,type) {
var contentString = html;
var marker = new google.maps.Marker({
position: point,
icon: gicons[type],
shadow: iconShadow,
map: map,
title: nick
});
// === Store the category and name info as a marker properties ===
marker.mycategory = type;
marker.myname = nick;
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(type) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == type) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(type+"box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(type) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == type) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(type+"box").checked = false;
// == close the info window, in case its open on a marker that we just hid
infowindow.close();
}
// == a checkbox has been clicked ==
function boxclick(box,type) {
if (box.checked) {
show(type);
} else {
hide(type);
}
// == rebuild the side bar
makeSidebar();
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i],"click");
}
// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebar() {
var html = "";
for (var i=0 ; i<gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = html;
}
function initialize() {
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(53.8363,-3.0377),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data
<?php
$query = mysql_query("SELECT * FROM data1");
while ($row = mysql_fetch_array($query)){
$id=$row['id'];
$lat=$row['lat'];
$lng=$row['lng'];
$type=$row['type'];
$server=$row['server'];
$nick=$row['nick'];
$jmeno=$row['jmeno'];
$mesto=$row['mesto'];
$ulice=$row['ulice'];
$vek=$row['vek'];
$stat=$row['stat'];
$icq=$row['kicq'];
$skype=$row['kskype'];
$email=$row['kemail'];
echo "\
var point = new GLatLng(".$lat.",".$lng.");\
";
echo "var marker = createMarker(point,'$nick','$vek','$type');\
";
echo "map.addOverlay(marker);\
";
}
?>
// == show or hide the categories initially ==
show("cz");
hide("sk");
// == create the initial sidebar ==
makeSidebar();
});
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<!-- you can use tables or divs for the overall layout -->
<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="czbox" onclick="boxclick(this,'cz')" />
Golf Courses: <input type="checkbox" id="skbox" onclick="boxclick(this,'sk')" />
</form>
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</body>
</html>
Thanks for any help…