-1
Ich versuche, die Buchstaben in der rechten Seitenleiste innerhalb eines Kreises erscheinen zu lassen. So etwas wie dies ..Setzen von Buchstabenmarkierungen in einen Kreis
http://freevector.co/wp-content/uploads/2014/08/12580-letter-a-inside-a-circle5.png
Wer weiß, wie dies zu tun? Dank
https://jsfiddle.net/vibajajo64/5zc9pwLe/2/
-Code für Briefe:
for (var i = 0;
((i < numberOfResults) && (i < closest.length)); i++) {
pins[i].setMap(map);
var letterMarkers = String.fromCharCode(65 + i);
pins[i].set('label', letterMarkers);
sidebarHtml += "<tr><td><a href='javascript:google.maps.event.trigger(closest[" + results[i].idx_closestMark + "],\"click\");'>" + letterMarkers + '</a><br>' + results[i].title + '</a><br>' + results[i].address + "<br>" + results[i].distance.text + ' approximately ' + results[i].duration.text + "<br><a href='javascript:getDirections(customerMarker.getPosition(),"" + results[i].address + "");'>Get Directions</a></tr></td>"
}
sidebarHtml += '</table>';
outputDiv.innerHTML = sidebarHtml;
}
});
}
Voll Code:
<!DOCTYPE html>
<html>
<head>
<style>
html,
body,
#map {
margin: 0;
padding: 0;
height: 600px;
width: 1050px;
}
.text {
width: 300px;
height: 600px;
background-color: white;
overflow: scroll;
overflow-y: auto;
overflow-x: hidden;
}
#side_bar {
z-index: 100;
position: absolute;
top: 135px;
left: 1080px;
}
#panel {
z-index: -100;
display: block;
position: absolute;
top: 135px;
left: 1080px;
}
#mdiv {
z-index: 500;
width: 25px;
height: 25px;
display: none;
background-color: red;
border: 1px solid black;
position: absolute;
left: 1330px;
top: 112px;
}
.mdiv {
height: 25px;
width: 2px;
margin-left: 12px;
background-color: black;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
z-index: 1;
}
.md {
height: 25px;
width: 2px;
background-color: black;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari and Chrome */
z-index: 2;
}
tr:nth-child(even) {
background: #E5E4E2
}
tr:nth-child(odd) {
background: #FFF
}
</style>
</head>
<link rel="stylesheet" type="text/css" href="assets/css/storelocator.css" />
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div class="bh-sl-container">
<div id="page-header">
<h1 class="bh-sl-title">The Auditor Locator</h1>
</div>
<div class="bh-sl-form-container">
<form onsubmit="codeAddress(); return false;" action="...">
<div class="form-input">
<label for="bh-sl-address">Enter Address or Zip Code:</label>
<input id="address" type="text" value="Paramus, NJ">
<input type="submit" value="Submit"
style="border:1px solid #666666;
height:34px; width:50pt; font-size:10pt; BACKGROUND-COLOR: #4CAF50;
color:#FFFFFF">
</form>
<table border="0" style="height:100%">
<tr style="height:100%">
<td style="height:100%">
<div id="map"></div>
</td>
<td>
<div id="side_bar" class='text'></div>
<div id="panel" class='text'></div>
</td>
</tr>
</table>
<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Please Enter Your Password',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "letmein") {
window.open('http://vince.netau.net/employee.php');
break;
}
testV+=1;
var pass1 =
prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<FORM>
<input type="button" value="Database" onClick="passWord()" style="border:1px solid #666666;
height:34px; width:60pt; font-size:10pt; BACKGROUND-COLOR: #4CAF50;
color:#FFFFFF">
</FORM>
<div id="info"></div>
<div id="mdiv">
<div class="mdiv">
<div class="md">
</div>
</div>
</div>
<script type="text/javascript">
var geocoder = null;
var map = null;
var customerMarker = null;
var gmarkers = [];
var closest = [];
var directionsDisplay = new google.maps.DirectionsRenderer();;
var directionsService = new google.maps.DirectionsService();
var map;
function hideMarkers() {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(null);
}
customerMarker.setMap(null);
}
function showMarkers() {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(map);
}
customerMarker.setMap(map);
directionsDisplay.setMap(null);
}
function initialize() {
// alert("init");
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(52.6699927, -0.7274620),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
document.getElementById('info').innerHTML = "found " + locations.length + " locations<br>";
for (i = 0; i < locations.length; i++) {
var coordStr = locations[i][3];
var coords = coordStr.split(",");
var pt = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
bounds.extend(pt);
marker = new google.maps.Marker({
position: pt,
map: map,
icon: locations[i][4],
address: locations[i][2],
title: locations[i][1],
html: locations[i][1] + "<br>" + locations[i][2] + "<br><br><a href='javascript:getDirections(customerMarker.getPosition(),"" + locations[i][2] + "");'>Get Directions</a>"
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(marker.html);
infowindow.open(map, marker);
}
})
(marker, i));
}
map.fitBounds(bounds);
$("#mdiv").click(function() {
$("#side_bar").css({
"z-index": 100,
"top": "135px"
});
$("#panel").css("z-index", -100);
$("#mdiv").css("display", "none");
showMarkers();
});
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
if (customerMarker) customerMarker.setMap(null);
customerMarker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
closest = findClosestN(results[0].geometry.location, 12);
// get driving distance
closest = closest.splice(0, 12);
calculateDistances(results[0].geometry.location, closest, 12);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function findClosestN(pt, numberOfResults) {
var closest = [];
document.getElementById('info').innerHTML += "processing " + gmarkers.length + "<br>";
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].distance = google.maps.geometry.spherical.computeDistanceBetween(pt, gmarkers[i].getPosition());
document.getElementById('info').innerHTML += "process " + i + ":" + gmarkers[i].getPosition().toUrlValue(6) + ":" + gmarkers[i].distance.toFixed(2) + "<br>";
gmarkers[i].setMap(null);
closest.push(gmarkers[i]);
closest.sort(sortByDist);
}
return closest;
}
function sortByDist(a, b) {
return (a.distance - b.distance)
}
function calculateDistances(pt, closest, numberOfResults) {
var service = new google.maps.DistanceMatrixService();
var request = {
origins: [pt],
destinations: [],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
};
for (var i = 0; i < closest.length; i++) {
request.destinations.push(closest[i].getPosition());
}
service.getDistanceMatrix(request, function(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('side_bar');
var sidebarHtml = '<table>';
var results = response.rows[0].elements;
// save title and address in record for sorting
for (var i = 0; i < closest.length; i++) {
results[i].title = closest[i].title;
results[i].address = closest[i].address;
results[i].idx_closestMark = i;
}
results.sort(sortByDistDM);
var pins = [];
results.forEach(function(result){
closest.forEach(function (addr){
if(result.address === addr.address){
pins.push(addr);
}
});
});
for (var i = 0;
((i < numberOfResults) && (i < closest.length)); i++) {
pins[i].setMap(map);
var letterMarkers = String.fromCharCode(65 + i);
pins[i].set('label', letterMarkers);
sidebarHtml += "<tr><td><a href='javascript:google.maps.event.trigger(closest[" + results[i].idx_closestMark + "],\"click\");'>" + letterMarkers + '</a><br>' + results[i].title + '</a><br>' + results[i].address + "<br>" + results[i].distance.text + ' approximately ' + results[i].duration.text + "<br><a href='javascript:getDirections(customerMarker.getPosition(),"" + results[i].address + "");'>Get Directions</a></tr></td>"
}
sidebarHtml += '</table>';
outputDiv.innerHTML = sidebarHtml;
}
});
}
function getDirections(origin, destination) {
var request = {
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setMap(map);
directionsDisplay.setDirections(response);
$("#side_bar").css({
"z-index": -100,
"top": "135px"
});
$("#panel").css("z-index", 100);
$("#mdiv").css("display", "block");
hideMarkers();
directionsDisplay.setPanel(document.getElementById('panel'));
}
});
}
function sortByDistDM(a, b) {
return (a.distance.value - b.distance.value)
}
google.maps.event.addDomListener(window, 'load', initialize);
var locations = [
["1", "John Doe", "145 Rock Ridge Road, Chester, NY ", "41.314926,-74.270134", "http://maps.google.com/mapfiles/ms/icons/blue.png"],
["2", "Jim Smith", "12 Williams Rd, Montvale, NJ ", "41.041599,-74.019554", "http://maps.google.com/mapfiles/ms/icons/green.png"],
["3", "John Jones", "689 Fern St Township of Washington, NJ ", "40.997704,-74.050598", "http://maps.google.com/mapfiles/ms/icons/yellow.png"]];
</script>
</body>
</html>
Sie möchten die vorhandenen Markierungen ci ändern Buchstaben mit Buchstaben als Label? Ich sehe keinen Code in Frage, um das zu tun. – geocodezip
Nein, ich meine nicht die Markierungen auf der Karte. Ich möchte Kreise um die Buchstaben in der Seitenleiste. –
Haben Sie versucht, den PNG, den Sie verlinken, einfach in die Seitenleiste zu setzen? – geocodezip