Всем привет! Сразу хочу отметить, в веб-деве я от силы неделю.
Суть проблемы, имеется сайт map-icons.com там, предоставлена демо версия (по ней собственно и "передвигаюсь") в ней используется *.html с которого map-icons.js считывает стиль налаживаемого изображения на форму что в итоге образует единую иконку.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Map Icons Demo</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<link rel="stylesheet" type="text/css" href="css/map-icons.css" />
<script src="js2/map-icons.js"></script>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
width: 100%;
height: 100%;
}
.marker-label,
.marker-icon {
z-index: 99;
position: absolute;
display: block;
margin-top: -54px;
margin-left: -25px;
width: 50px;
height: 50px;
font-size: 30px !important;
text-align: center;
color: #e5e5e5;
white-space: nowrap;
}
</style>
<script src="main.js"></script>
</head>
<body>
<div id="panel">
<input onclick="setM();" type=button value="goMarkers">
</div>
<div id="map-canvas"></div>
</body>
</html>
/**
* Map Icons created by Scott de Jonge
*
* @version 2.1
* @url [url]http://map-icons.com[/url]
*
*/
// Define Marker Shapes
var MAP_PIN = 'M0-165c-27.618 0-50 21.966-50 49.054C-50-88.849 0 0 0 0s50-88.849 50-115.946C50-143.034 27.605-165 0-165z';
var SQUARE_PIN = 'M 50 -119.876 -50 -119.876 -50 -19.876 -13.232 -19.876 0.199 0 13.63 -19.876 50 -19.876 Z';
var SHEILD = 'M42.8-72.919c0.663-7.855 3.029-15.066 7.2-21.675L34.002-110c-5.054 4.189-10.81 6.509-17.332 6.919 c-5.976 0.52-11.642-0.574-16.971-3.287c-5.478 2.626-11.121 3.723-17.002 3.287c-6.086-0.523-11.577-2.602-16.495-6.281 l-16.041 15.398c3.945 6.704 6.143 13.72 6.574 21.045c0.205 3.373-0.795 8.016-3.038 14.018c-1.175 3.327-2.061 6.213-2.667 8.627 c-0.562 2.394-0.911 4.34-1.027 5.801c-0.082 6.396 1.78 12.168 5.602 17.302c2.986 3.745 7.911 7.886 14.748 12.41 c7.482 3.665 13.272 6.045 17.326 7.06c1.163 0.521 2.301 1.025 3.363 1.506C-7.9-5.708-6.766-5.232-5.586-4.713 C-3.034-3.242-1.243-1.646-0.301 0C0.858-1.782 2.69-3.338 5.122-4.713c1.717-0.723 3.173-1.346 4.341-1.896 c1.167-0.494 2.037-0.865 2.54-1.09c0.866-0.414 2.002-0.888 3.376-1.41c1.386-0.527 3.101-1.168 5.144-1.882 c3.951-1.348 6.83-2.62 8.655-3.77c6.634-4.524 11.48-8.595 14.566-12.235c3.958-5.152 5.879-10.953 5.79-17.475 c-0.232-2.922-1.52-7.594-3.85-13.959C43.463-64.631 42.479-69.445 42.8-72.919z';
var ROUTE = 'M49.986-58.919c-0.51-27.631-16.538-38.612-17.195-39.049l-2.479-1.692l-2.5 1.689c-4.147 2.817-8.449 4.247-12.783 4.247 c-7.178 0-12.051-3.864-12.256-4.032L-0.023-100l-2.776 2.248c-0.203 0.165-5.074 4.028-12.253 4.028 c-4.331 0-8.63-1.429-12.788-4.253l-2.486-1.678l-2.504 1.692c-1.702 1.17-16.624 12.192-17.165 38.907 C-50.211-56.731-43.792-12.754-0.003 0C47.609-13.912 50.23-56.018 49.986-58.919z';
var ROUNDED = 'M50-80c0-11-9-20-20-20h-60c-11 0-20 9-20 20v60c0 11 9 20 20 20h60c11 0 20-9 20-20V-80z';
// Function to do the inheritance properly
// Inspired by: [url]http://stackoverflow.com/questions/9812783/cannot-inherit-google-maps-map-v3-in-my-custom-class-javascript[/url]
var inherits = function(childCtor, parentCtor) {
/** @constructor */
function tempCtor() {};
tempCtor.prototype = parentCtor.prototype;
childCtor.superClass_ = parentCtor.prototype;
childCtor.prototype = new tempCtor();
childCtor.prototype.constructor = childCtor;
};
function Marker(options){
google.maps.Marker.apply(this, arguments);
if (options.label) {
this.MarkerLabel = new MarkerLabel({
map: this.map,
marker: this,
text: options.label
});
this.MarkerLabel.bindTo('position', this, 'position');
}
}
// Apply the inheritance
inherits(Marker, google.maps.Marker);
// Custom Marker SetMap
Marker.prototype.setMap = function() {
google.maps.Marker.prototype.setMap.apply(this, arguments);
(this.MarkerLabel) && this.MarkerLabel.setMap.apply(this.MarkerLabel, arguments);
};
// Marker Label Overlay
var MarkerLabel = function(options) {
var self = this;
this.setValues(options);
// Create the label container
this.div = document.createElement('div');
this.div.className = 'marker-label';
var span = document.createElement('span');
span.className = "marker-icon";
this.div.appendChild(span);
// Trigger the marker click handler if clicking on the label
google.maps.event.addDomListener(this.div, 'click', function(e){
(e.stopPropagation) && e.stopPropagation();
google.maps.event.trigger(self.marker, 'click');
});
};
// Create MarkerLabel Object
MarkerLabel.prototype = new google.maps.OverlayView; //add, draw, onRemove*
// Marker Label onAdd
MarkerLabel.prototype.onAdd = function() {
var pane = this.getPanes().overlayImage.appendChild(this.div);
var self = this;
this.listeners = [
google.maps.event.addListener(this, 'position_changed', function() { self.draw(); }),
google.maps.event.addListener(this, 'text_changed', function() { self.draw(); }),
google.maps.event.addListener(this, 'zindex_changed', function() { self.draw(); })
];
};
// Marker Label onRemove
MarkerLabel.prototype.onRemove = function() {
this.div.parentNode.removeChild(this.div);
for (var i = 0, I = this.listeners.length; i < I; ++i) {
google.maps.event.removeListener(this.listeners[i]);
}
};
// Implement draw
MarkerLabel.prototype.draw = function() {
var projection = this.getProjection();
var position = projection.fromLatLngToDivPixel(this.get('position'));
var div = this.div;
div.style.left = position.x + 'px';
div.style.top = position.y + 'px';
div.style.display = 'block';
div.style.zIndex = this.get('zIndex'); //ALLOW LABEL TO OVERLAY MARKER
this.div.innerHTML = this.get('text').toString();
};
при использовании .html файла все работает, но необходимо сделать так чтобы параметры стиля задавались в *.js файле, или считать их каким-то образом.
Очень надеюсь на вашу наводку!
