Untitled diff
建立於 差異永不過期
var marker;
var marker;
var locations = [
var locations = [
["6", "43.683", "9.58", "3002: Location 1", 1, true],
["6", "43.683", "9.58", "3002: Location 1", 1, true],
["7", "45.149", "9.44", "3003: Location", 2, false]
["7", "45.149", "9.44", "3003: Location", 2, false]
];
];
var markerShadow;
var markerShadow;
var infowindow = new google.maps.InfoWindow();
function initialize() {
function initialize() {
var mapProp = {
var mapProp = {
center: new google.maps.LatLng(43.683, 9.44),
center: new google.maps.LatLng(43.683, 9.44),
zoom: 5,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
mapTypeId: google.maps.MapTypeId.ROADMAP
};
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var iconShadow = {
var iconShadow = {
url: 'http://www.geocodezip.com/mapIcons/marker_shadow.png',
url: 'http://www.geocodezip.com/mapIcons/marker_shadow.png',
// The shadow image is larger in the horizontal dimension
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
// while the position and offset are the same as for the main image.
size: new google.maps.Size(37, 34),
size: new google.maps.Size(37, 34),
origin: new google.maps.Point(0, 0),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(10, 34)
anchor: new google.maps.Point(10, 34)
};
};
for (i = 0; i < locations.length; i++) {
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/purple.png',
icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/purple.png',
title: locations[i][3]
title: locations[i][3]
});
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
return function() {
if (markerShadow && markerShadow.setPosition) {
if (markerShadow && markerShadow.setMap) {
markerShadow.setPosition(this.getPosition());
markerShadow.setMap(null);
markerShadow = new MarkerShadow(marker.getPosition(), iconShadow, map);
} else if (!markerShadow) {
} else if (!markerShadow) {
markerShadow = new MarkerShadow(marker.getPosition(), iconShadow, map);
markerShadow = new MarkerShadow(marker.getPosition(), iconShadow, map);
}
}
}
}
})(marker, i));
})(marker, i));
marker.setMap(map);
marker.setMap(map);
}
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'load', initialize);
// marker shadow code
// marker shadow code
MarkerShadow.prototype = new google.maps.OverlayView();
MarkerShadow.prototype = new google.maps.OverlayView();
MarkerShadow.prototype.setPosition = function(latlng) {
/** @constructor */
this.posn_ = latlng;
this.draw();
}
/** @constructor */
function MarkerShadow(position, options, map) {
function MarkerShadow(position, options, map) {
// Initialize all properties.
// Initialize all properties.
this.posn_ = position;
this.posn_ = position;
this.map_ = map;
this.map_ = map;
if (typeof(options) == "string") {
if (typeof(options) == "string") {
this.image = options;
this.image = options;
} else {
} else {
this.options_ = options;
this.options_ = options;
if (!!options.size) this.size_ = options.size;
if (!!options.size) this.size_ = options.size;
if (!!options.url) this.image_ = options.url;
if (!!options.url) this.image_ = options.url;
}
}
// Define a property to hold the image's div. We'll
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
// method so we'll leave it null for now.
this.div_ = null;
this.div_ = null;
// Explicitly call setMap on this overlay.
// Explicitly call setMap on this overlay.
this.setMap(map);
this.setMap(map);
}
}
/**
/**
* onAdd is called when the map's panes are ready and the overlay has been
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
* added to the map.
*/
*/
MarkerShadow.prototype.onAdd = function() {
MarkerShadow.prototype.onAdd = function() {
// if no url, return, nothing to do.
// if no url, return, nothing to do.
if (!this.image_) return;
if (!this.image_) return;
var div = document.createElement('div');
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
// Create the img element and attach it to the div.
var img = document.createElement('img');
var img = document.createElement('img');
img.src = this.image_;
img.src = this.image_;
img.style.width = this.options_.size.x + 'px';
img.style.width = this.options_.size.x + 'px';
img.style.height = this.options_.size.y + 'px';
img.style.height = this.options_.size.y + 'px';
img.style.position = 'absolute';
img.style.position = 'absolute';
div.appendChild(img);
div.appendChild(img);
this.div_ = div;
this.div_ = div;
// Add the element to the "overlayLayer" pane.
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
var panes = this.getPanes();
panes.overlayShadow.appendChild(div);
panes.overlayShadow.appendChild(div);
};
};
MarkerShadow.prototype.draw = function() {
MarkerShadow.prototype.draw = function() {
// if no url, return, nothing to do.
// if no url, return, nothing to do.
if (!this.image_) return;
if (!this.image_) return;
// We use the coordinates of the overlay to peg it to the correct position
// We use the coordinates of the overlay to peg it to the correct position
// To do this, we need to retrieve the projection from the overlay.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
var overlayProjection = this.getProjection();
var posn = overlayProjection.fromLatLngToDivPixel(this.posn_);
var posn = overlayProjection.fromLatLngToDivPixel(this.posn_);
// Resize the image's div to fit the indicated dimensions.
// Resize the image's div to fit the indicated dimensions.
if (!this.div_) return;
if (!this.div_) return;
var div = this.div_;
var div = this.div_;
if (!!this.options_.anchor) {
if (!!this.options_.anchor) {
div.style.left = Math.floor(posn.x - this.options_.anchor.x) + 'px';
div.style.left = Math.floor(posn.x - this.options_.anchor.x) + 'px';
div.style.top = Math.floor(posn.y - this.options_.anchor.y) + 'px';
div.style.top = Math.floor(posn.y - this.options_.anchor.y) + 'px';
}
}
if (!!this.options_.size) {
if (!!this.options_.size) {
div.style.width = this.size_.x + 'px';
div.style.width = this.size_.x + 'px';
div.style.height = this.size_.y + 'px';
div.style.height = this.size_.y + 'px';
}
}
};
};
// The onRemove() method will be called automatically from the API if
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
// we ever set the overlay's map property to 'null'.
MarkerShadow.prototype.onRemove = function() {
MarkerShadow.prototype.onRemove = function() {
if (!this.div_) return;
if (!this.div_) return;
this.div_.parentNode.removeChild(this.div_);
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
this.div_ = null;
};
};
html,
html,
body,
body,
#googleMap {
#googleMap {
height: 100%;
height: 100%;
width: 100%;
width: 100%;
margin: 0px;
margin: 0px;
padding: 0px
padding: 0px
}
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>
<div id="googleMap"></div>