我一直关注这篇文章 https://developers.google.com/maps/articles/phpsqlajax_v3，其中介绍了如何使用数据库中包含的信息创建带有图钉的Google地图。
我已将示例转换为使用Microsoft SQL数据库中包含的现有数据，但提取的工作正常。我的问题是初始地图包含超过1000个引脚，所以我需要过滤它进行分析。
接下来，我创建了一个带有复选框的HTML表单，以便用户可以选择覆盖在地图上的不同类别，而不用他们不想要的类别。
为了测试我的表单中的所有内容是动作=
<form action="GenerateXML.php" method="post">
并修改了GenerateXML.php以基于传入的$ _POST数组构建查询。正如预期的那样，这将在浏览器中显示我过滤的XML。
优秀！我想我现在真的很接近，但我无法弄清楚如何从我的提交按钮加载地图而不是“function load（）”
我想过从这样的表单中调用一个javascript函数
<form name="form" action="PortfolioMap.html" onsubmit="return reloadResults(form)" method="POST">
之后调用函数并返回相同的表单。
function reloadResults()
{
alert("Hi There");
elements = document.getElementsByClassName("Portfolio");
$.post('GenerateXML.php', {elements: elements})
}
虽然我现在只是猜测如何将$ _POST数组传递给GenerateXML.php并重绘地图。上面的代码没有做任何事情，只是重绘没有引脚的地图，因为没有从xml传入任何内容（我认为）。
以下是我正在处理的完整PortfolioMap.html。
有关如何使用表单中的信息重绘地图的任何想法吗？
由于 大卫。
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Portfolio Maps Example</title>
<style>
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
#map
{
position: absolute;
top: 350px;
left: 0;
bottom: 0;
right: 0;
}
.CheckBoxTable
{
display: table;
width: 50%;
}
.CheckBoxRow {display: table-row; }
.CheckBoxCell
{
display: table-cell;
border: 1px solid #999999;
padding: 1px 5px;
}
</style>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<MY API KEY>"
type="text/javascript">
</script>
<script type="text/javascript">
var customIcons =
{
Black: {icon: 'black.png'},
Blue: {icon: 'blue.png'},
Gold: {icon: 'gold.png'},
Grey: {icon: 'grey.png'},
Green: {icon: 'green.png'},
Lime: {icon: 'lime.png'},
Mustard: {icon: 'mustard.png'},
Olive: {icon: 'olive.png'},
Orange: {icon: 'orange.png'},
Pink: {icon: 'pink.png'},
Purple: {icon: 'purple.png'},
Red: {icon: 'red.png'},
Teal: {icon: 'teal.png'},
Yellow: {icon: 'yellow.png'},
CCBlack: {icon: 'ccblack.png'},
CCBlue: {icon: 'ccblue.png'},
CCGold: {icon: 'ccgold.png'},
CCLime: {icon: 'cclime.png'},
CCOlive: {icon: 'ccolive.png'},
CCPink: {icon: 'ccpink.png'},
CCPurple: {icon: 'ccpurple.png'},
CCRed: {icon: 'ccred.png'},
CCTeal: {icon: 'ccteal.png'},
CCYellow: {icon: 'ccyellow.png'},
YSBlack: {icon: 'ysblack.png'},
YSBlue: {icon: 'ysblue.png'},
YSGold: {icon: 'ysgold.png'},
YSLime: {icon: 'yslime.png'},
YSOlive: {icon: 'ysolive.png'},
YSPink: {icon: 'yspink.png'},
YSPurple: {icon: 'yspurple.png'},
YSRed: {icon: 'ysred.png'},
YSTeal: {icon: 'ysteal.png'},
YSYellow: {icon: 'ysyellow.png'},
};
function load()
{
refreshMap();
}
function refreshMap()
{
var map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(-33.9119, 151.1015),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("GenerateXML.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("latitude")),
parseFloat(markers[i].getAttribute("longitude")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
// alert("Debug 2 " + url );
// alert("Debug 3 " + callback );
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function reloadResults()
{
alert("Hi There");
elements = document.getElementsByClassName("Portfolio");
$.post('GenerateXML.php', {elements: elements})
}
function doNothing() {}
</script>
</head>
<body onload="load()">
<div id="userForm" >
<form name="form" action="PortfolioMap.html" onsubmit="return reloadResults(form)" method="POST">
<!-- <form action="GenerateXML.php" method="post"> -->
<fieldset>
<legend> <H2>Select Elements to Display</h2></legend>
<div class="CheckBoxTable">
<div class="CheckoxRow">
General
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "blackPortfolio" value = "Black" />
<label for = "blackPortfolio">Black</label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "bluePortfolio" value = "Blue" />
<label for = "bluePortfolio"> Blue </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "goldPortfolio" value = "Gold" />
<label for = "goldPortfolio"> Gold </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "greyPortfolio" value = "Grey" />
<label for = "greyPortfolio"> Grey </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "greenPortfolio" value = "Green" />
<label for = "greenPortfolio"> Green </label>
</div>
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "limePortfolio" value = "Lime" />
<label for = "limePortfolio"> Lime </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "mustardPortfolio" value = "Mustard" />
<label for = "mustardPortfolio"> Mustard </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "olivePortfolio" value = "Olive" />
<label for = "olivePortfolio"> Olive </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "orangePortfolio" value = "Orange" />
<label for = "orangePortfolio"> Orange </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "pinkPortfolio" value = "Pink" />
<label for = "pinkPortfolio"> Pink </label>
</div>
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "purplePortfolio" value = "Purple" />
<label for = "purplePortfolio"> Purple </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "redPortfolio" value = "Red" />
<label for = "redPortfolio"> Red </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "tealPortfolio" value = "Teal" />
<label for = "tealPortfolio"> Teal </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "yellowPortfolio" value = "Yellow" />
<label for = "yellowPortfolio"> Yellow </label>
</div>
</div>
<div class="CheckoxRow">
Manager Name 1
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccblackPortfolio" value = "CCBlack" />
<label for = "ccblackPortfolio">CCBlack</label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccbluePortfolio" value = "CCBlue" />
<label for = "ccbluePortfolio"> CCBlue </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccgoldPortfolio" value = "CCGold" />
<label for = "ccgoldPortfolio"> CCGold </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "cclimePortfolio" value = "CCLime" />
<label for = "cclimePortfolio"> CCLime </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccolivePortfolio" value = "CCOlive" />
<label for = "ccolivePortfolio"> CCOlive </label>
</div>
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccpinkPortfolio" value = "CCPink" />
<label for = "ccpinkPortfolio"> CCPink </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "cclimePortfolio" value = "CCPurple" />
<label for = "cclimePortfolio"> CCPurple </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccmustardPortfolio" value = "CCRed" />
<label for = "ccmustardPortfolio"> CCRed </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "cctealPortfolio" value = "CCTeal" />
<label for = "cctealPortfolio"> CCTeal </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccyellowPortfolio" value = "CCYellow" />
<label for = "ccyellowPortfolio"> CCYellow </label>
</div>
</div>
<div class="CheckoxRow">
Manager Name 2
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ysblackPortfolio" value = "YSBack" />
<label for = "chkBlack">YSBlack</label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ysbluePortfolio" value = "YSBlue" />
<label for = "chkBlue"> YSBlue </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ysgoldPortfolio" value = "YSGold" />
<label for = "chkGold"> YSGold </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "yslimePortfolio" value = "YSLime" />
<label for = "chkLime"> YSLime </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ysolivePortfolio" value = "YSOlive" />
<label for = "chkOlive"> YSOlive </label>
</div>
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "yspinkPortfolio" value = "YSPink" />
<label for = "chkPink"> YSPink </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "yspurplePortfolio" value = "YSPurple" />
<label for = "chkPurple"> YSPurple </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ysredPortfolio" value = "YSRed" />
<label for = "chkRed"> YSRed </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ystealPortfolio" value = "YSTeal" />
<label for = "chkteal"> YSTeal </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ysyellowPortfolio" value = "YSYellow" />
<label for = "chkYellow"> YSYellow </label>
</div>
</div>
</div>
</fieldset>
<!-- <input type="submit" name="formSubmit" value="OK" /> -->
<!-- <input type="button" value="Submit" onclick="testResults(this.form)"> -->
<input type="submit" value="OK">
</form>
</div>
<div id="map" </div>
更新
我找到了一些建议here 所以我更新了我的测试功能，看起来像这样。
function reloadResults(mapForm)
{
alert("Hi There 1");
var postData = <?php echo json_encode($_POST) ?>;
alert(postData.blackPortfolio );
alert(postData.limePortfolio);
alert(postData.purplePortfolio);
}
现在，当我加载表单并执行视图源时，var postData行看起来像这样。
var postData = [];
单击某些框后单击“确定”
看起来像这样。
var postData = {"blackPortfolio":"Black","limePortfolio":"Lime","purplePortfolio":"Purple"};
似乎总是落后一页。 我显然在这里缺少一些基本的东西。
答案 0 :(得分：1)
$ .post是一个jQuery method，但你的脚本缺少了库
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
假设您正在使用jQuery，您的代码可能看起来像这样
<input type="button" value="OK" onclick="reloadResults()">
function reloadResults() {
var elements = document.getElementsByClassName("Portfolio");
$.post('GenerateXML.php', {elements: elements}), function(xml) {
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
...
答案 1 :(得分：0)
问题结果出现在函数＆＃34; downloadUrl＆＃34;中。最初的例子是做一个GET，我需要做一个POST
当我认为我要对服务器进行一到多次往返时，仍然存在一个问题，并且所得到的引脚再次被消隐。我点击后退按钮，像魔术一样显示所有引脚。如果我无法解决这个问题，我会在一个新问题中发布此问题。 （如果我可以在这里发布）
本守则
request.open('GET', url, true);
request.send(null);
成为本守则
request.open("POST", url, true)
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(formString);
这篇文章帮助我找到答案http://www.openjs.com/articles/ajax_xmlhttp_using_post.php
这是完整的（几乎）正在运行的HTML，其中包含我做的任何其他更改，以防其他人尝试执行相同的操作。
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script language="javascript" type="text/javascript" src="jquery-3.1.1.js"></script>
<title>V.J. Ray Portfolio Map</title>
<style>
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
#map
{
position: absolute;
top: 350px;
left: 0;
bottom: 0;
right: 0;
}
.CheckBoxTable
{
display: table;
width: 50%;
}
.CheckBoxRow {display: table-row; }
.CheckBoxCell
{
display: table-cell;
border: 1px solid #999999;
padding: 1px 5px;
}
</style>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<MY-API-KEY>"
type="text/javascript">
</script>
<script type="text/javascript">
var customIcons =
{
Black: {icon: 'pins/black.png'},
Blue: {icon: 'pins/blue.png'},
Gold: {icon: 'pins/gold.png'},
Grey: {icon: 'pins/grey.png'},
Green: {icon: 'pins/green.png'},
Lime: {icon: 'pins/lime.png'},
Mustard: {icon: 'pins/mustard.png'},
Olive: {icon: 'pins/olive.png'},
Orange: {icon: 'pins/orange.png'},
Pink: {icon: 'pins/pink.png'},
Purple: {icon: 'pins/purple.png'},
Red: {icon: 'pins/red.png'},
Teal: {icon: 'pins/teal.png'},
Yellow: {icon: 'pins/yellow.png'},
CCBlack: {icon: 'pins/ccblack.png'},
CCBlue: {icon: 'pins/ccblue.png'},
CCGold: {icon: 'pins/ccgold.png'},
CCLime: {icon: 'pins/cclime.png'},
CCOlive: {icon: 'pins/ccolive.png'},
CCPink: {icon: 'pins/ccpink.png'},
CCPurple: {icon: 'pins/ccpurple.png'},
CCRed: {icon: 'pins/ccred.png'},
CCTeal: {icon: 'pins/ccteal.png'},
CCYellow: {icon: 'pins/ccyellow.png'},
YSBlack: {icon: 'pins/ysblack.png'},
YSBlue: {icon: 'pins/ysblue.png'},
YSGold: {icon: 'pins/ysgold.png'},
YSLime: {icon: 'pins/yslime.png'},
YSOlive: {icon: 'pins/ysolive.png'},
YSPink: {icon: 'pins/yspink.png'},
YSPurple: {icon: 'pins/yspurple.png'},
YSRed: {icon: 'pins/ysred.png'},
YSTeal: {icon: 'pins/ysteal.png'},
YSYellow: {icon: 'pins/ysyellow.png'},
};
function load()
{
// Draws the map with no pins initially
//alert("Hi From Load");
refreshMap();
}
function refreshMap()
{
//alert("Hi There from refreshMap()");
var map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(-33.9119, 151.1015),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
var formString=$("form").serialize();
// Change this depending on the name of your PHP file
downloadUrl("GenerateXML.php",formString, function(data)
{
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++)
{
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("latitude")),
parseFloat(markers[i].getAttribute("longitude")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker(
{
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url,formString, callback) {
//alert("Hi There 3 downloadUrl (" + url + "," + formString + "," + callback);
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4)
{
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open("POST", url, true)
//Send the proper header information along with the request
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(formString);
}
function doNothing() {}
</script>
</head>
<body onload="load()">
<div id="userForm" >
<!-- <form name="mapForm" action="" onsubmit="return refreshMap()" method=""> <!-- This will call refreshMap() Works if you use the back button -->
<!-- <form action="GenerateXML.php" method="post"> --> <!--This will output the XML to the browser window and test GenerateXML.php -->
<form name="mapForm" action="" method="">
<fieldset>
<legend> <H2>Select Portfolio's to Display</h2></legend>
<div class="CheckBoxTable">
<div class="CheckoxRow">
General
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "blackPortfolio" value = "Black" />
<label for = "blackPortfolio">Black</label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "bluePortfolio" value = "Blue" />
<label for = "bluePortfolio"> Blue </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "goldPortfolio" value = "Gold" />
<label for = "goldPortfolio"> Gold </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "greyPortfolio" value = "Grey" />
<label for = "greyPortfolio"> Grey </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "greenPortfolio" value = "Green" />
<label for = "greenPortfolio"> Green </label>
</div>
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "limePortfolio" value = "Lime" />
<label for = "limePortfolio"> Lime </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "mustardPortfolio" value = "Mustard" />
<label for = "mustardPortfolio"> Mustard </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "olivePortfolio" value = "Olive" />
<label for = "olivePortfolio"> Olive </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "orangePortfolio" value = "Orange" />
<label for = "orangePortfolio"> Orange </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "pinkPortfolio" value = "Pink" />
<label for = "pinkPortfolio"> Pink </label>
</div>
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "purplePortfolio" value = "Purple" />
<label for = "purplePortfolio"> Purple </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "redPortfolio" value = "Red" />
<label for = "redPortfolio"> Red </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "tealPortfolio" value = "Teal" />
<label for = "tealPortfolio"> Teal </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "yellowPortfolio" value = "Yellow" />
<label for = "yellowPortfolio"> Yellow </label>
</div>
</div>
<div class="CheckoxRow">
Carolann Campbell
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccblackPortfolio" value = "CCBlack" />
<label for = "ccblackPortfolio">CCBlack</label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccbluePortfolio" value = "CCBlue" />
<label for = "ccbluePortfolio"> CCBlue </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccgoldPortfolio" value = "CCGold" />
<label for = "ccgoldPortfolio"> CCGold </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "cclimePortfolio" value = "CCLime" />
<label for = "cclimePortfolio"> CCLime </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccolivePortfolio" value = "CCOlive" />
<label for = "ccolivePortfolio"> CCOlive </label>
</div>
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccpinkPortfolio" value = "CCPink" />
<label for = "ccpinkPortfolio"> CCPink </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "cclimePortfolio" value = "CCPurple" />
<label for = "cclimePortfolio"> CCPurple </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccmustardPortfolio" value = "CCRed" />
<label for = "ccmustardPortfolio"> CCRed </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "cctealPortfolio" value = "CCTeal" />
<label for = "cctealPortfolio"> CCTeal </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ccyellowPortfolio" value = "CCYellow" />
<label for = "ccyellowPortfolio"> CCYellow </label>
</div>
</div>
<div class="CheckoxRow">
Yuliya Sobol
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ysblackPortfolio" value = "YSBlack" />
<label for = "chkBlack">YSBlack</label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ysbluePortfolio" value = "YSBlue" />
<label for = "chkBlue"> YSBlue </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ysgoldPortfolio" value = "YSGold" />
<label for = "chkGold"> YSGold </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "yslimePortfolio" value = "YSLime" />
<label for = "chkLime"> YSLime </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ysolivePortfolio" value = "YSOlive" />
<label for = "chkOlive"> YSOlive </label>
</div>
</div>
<div class="CheckBoxRow">
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "yspinkPortfolio" value = "YSPink" />
<label for = "chkPink"> YSPink </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "yspurplePortfolio" value = "YSPurple" />
<label for = "chkPurple"> YSPurple </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ysredPortfolio" value = "YSRed" />
<label for = "chkRed"> YSRed </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ystealPortfolio" value = "YSTeal" />
<label for = "chkteal"> YSTeal </label>
</div>
<div class="CheckBoxCell">
<input type = "checkbox" class = "Portfolio" name = "ysyellowPortfolio" value = "YSYellow" />
<label for = "chkYellow"> YSYellow </label>
</div>
</div>
</div>
</fieldset>
<input type="submit" value = "OK">
</form>
</div>
<div id="map" </div>
</body>
</html>