-10 Removals
+4 Additions
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>
Editor
Original Text
Changed Text