Hello fellow StackExchange members,
I am really struggling with adding multiple GroundOverlays and/or CustomOverlays. Google Maps always shows a slight and recurring anomaly in positioning the tiles. The image below shows what I mean:
http://i.stack.imgur.com/ZmPa4.jpg (I don't have enough reputation to show the image inline).
I used Google's example code of how to use the CustomOverlay, as shown below, and a prebuild grid.json file which houses all the tile image keys and their SW and NE bounds:
The Maps file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
*{ margin:0;padding:0;}
html{ height: 100%;}
body{ height: 100%; margin:0; padding:0;}
#map-canvas{ height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDOwFuc5S-hRJnfyYI3xL-0TJNcPjbRd2s&sensor=false">
</script>
<script type="text/javascript">
// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.
// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class.
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Initialize the map and the custom overlay.
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.960515285616523328826588112860918045043945312500,
4.026193748674999461911738762864843010902404785156 ),
zoom: 13
};
var map = new google.maps.Map( document.getElementById( 'map-canvas'), mapOptions );
var grid = $.getJSON( 'grid.json', function( json ){
$.each( json, function( index, value )
{
var image = index + '.png';
var swBound = new google.maps.LatLng( value['sw'][0], value['sw'][1] );
var neBound = new google.maps.LatLng( value['ne'][0], value['ne'][1] );
var bounds = new google.maps.LatLngBounds( swBound, neBound )
overlay = new USGSOverlay( bounds, image, map );
overlay.setOpacity( 50 );
});
});
}
/** #constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.className = 'reset';
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
div.style.opacity = '0.6';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
USGSOverlay.prototype.setOpacity = function( op )
{
$('div.reset').css( 'opacity', op/100 );
}
USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
google.maps.event.addDomListener( window, 'load', initialize );
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
To give an idea of the contents of grid.json, here's an excerpt:
{
"110-861": {
"ne": [
51.952818013763725,
3.959379207489501
],
"sw": [
51.94812597892079,
3.952079437462081
]
},
"110-862": {
"ne": [
51.95741935496997,
3.9592327762378288
],
"sw": [
51.95272731127462,
3.9519322780340236
]
},
...
}
It consists of many keys ( like "110-862" ) which represent, after a calculation, Rijksdriehoeks Coordinates (a Dutch geospatial representation). These coordinates have been converted to WGS84 with a precision of 0.2mm. Still I get these strange distortions.
Is there anyone who has experience in using this much map tiles together?
With kind regards
Related
I'm currently trying to implement Custom Overlays and am looking at Google's docs. However, their example doesn't seem to be working which is making it quite difficult.
Docs: https://developers.google.com/maps/documentation/javascript/examples/overlay-simple
It appears that the "onAdd" callback is never called, even though these docs say that onAdd will be called after setMap is called.
Anyone know what's wrong with their example and why it's not working?
geocodezip commented and their answer fixes it :).
"They broke it when the translated it to the new format. fiddle. The pieces that depend on the API need to be in the initMap function"
See below for fiddle contents:
(function(exports) {
"use strict";
// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.
// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class therefore
// it's simpler to load the API synchronously, using
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.
// Initialize the map and the custom overlay.
function initMap() {
USGSOverlay.prototype = new google.maps.OverlayView();
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center: {
lat: 62.323907,
lng: -150.109291
},
mapTypeId: "satellite"
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608)
); // The photograph is courtesy of the U.S. Geological Survey.
var srcImage =
"https://developers.google.com/maps/documentation/" +
"javascript/examples/full/images/talkeetna.png"; // The custom USGSOverlay object contains the USGS image,
// the bounds of the image, and a reference to the map.
/** #constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map; // Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null; // Explicitly call setMap on this overlay.
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement("div");
div.style.borderStyle = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute"; // Create the img element and attach it to the div.
var img = document.createElement("img");
console.log(this.image_);
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
img.style.position = "absolute";
div.appendChild(img);
this.div_ = div; // Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection(); // Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(
this.bounds_.getSouthWest()
);
var ne = overlayProjection.fromLatLngToDivPixel(
this.bounds_.getNorthEast()
); // Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + "px";
div.style.top = ne.y + "px";
div.style.width = ne.x - sw.x + "px";
div.style.height = sw.y - ne.y + "px";
}; // The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
exports.overlay = new USGSOverlay(bounds, srcImage, map);
exports.USGSOverlay = USGSOverlay;
}
exports.initMap = initMap;
})((this.window = this.window || {}));
While displaying an overlay over google maps using the API. I am googling for last three days how to calculate the South West and North east bounds for an overlay of size 100X100. I found millions of examples but the bounds were written hard coded.
My input is Center Latitude and Longitude and a 100x100 image.
The code I found is:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 62.323907, lng: -150.109291},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(SE),
new google.maps.LatLng(NE));
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
srcImage += 'examples/full/images/talkeetna.png';
overlay = new USGSOverlay(bounds, srcImage, map);
}
I am woundering how these bounds were calculated?
SE and NE
To calculate the bounds (specifically a google.maps.LatLngBounds object) that is 100px x 100px centered at the center of the bounds of that overlay:
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
find the pixel position of the center:
var center = bounds.getCenter();
var centerPt = overlay.getProjection().fromLatLngToDivPixel(center);
find the pixel point 50px up and 50px right of it
var topRightPt = new google.maps.Point(centerPt.x+50, centerPt.y+50);
find the pixel point 50px down and 50px left of it
var botLeftPt = new google.maps.Point(centerPt.x-50, centerPt.y-50);
translate those back to latitude and longitude coordinates
var sw = overlay.getProjection().fromDivPixelToLatLng(botLeftPt);
var ne = overlay.getProjection().fromDivPixelToLatLng(topRightPt);
proof of concept fiddle
overlay = new USGSOverlay(bounds, srcImage, map);
google.maps.event.addListener(overlay, 'projection_changed', function() {
var centerPt = overlay.getProjection().fromLatLngToDivPixel(center);
var topRightPt = new google.maps.Point(centerPt.x+50, centerPt.y+50);
var botLeftPt = new google.maps.Point(centerPt.x-50, centerPt.y-50);
var sw = overlay.getProjection().fromDivPixelToLatLng(botLeftPt);
var ne = overlay.getProjection().fromDivPixelToLatLng(topRightPt);
var overlayBnds = new google.maps.LatLngBounds(sw,ne);
var rectangle = new google.maps.Rectangle({
map: map,
bounds: overlayBnds
})
});
code snippet:
google.maps.event.addDomListener(window, "load", initMap);
// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.
// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class therefore
// it's simpler to load the API synchronously, using
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Initialize the map and the custom overlay.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 62.323907,
lng: -150.109291
},
mapTypeId: 'satellite'
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
var center = bounds.getCenter();
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage = 'https://developers.google.com/maps/documentation/' +
'javascript/examples/full/images/talkeetna.png';
// The custom USGSOverlay object contains the USGS image,
// the bounds of the image, and a reference to the map.
overlay = new USGSOverlay(bounds, srcImage, map);
google.maps.event.addListener(overlay, 'projection_changed', function() {
var centerPt = overlay.getProjection().fromLatLngToDivPixel(center);
var topRightPt = new google.maps.Point(centerPt.x + 50, centerPt.y + 50);
var botLeftPt = new google.maps.Point(centerPt.x - 50, centerPt.y - 50);
var sw = overlay.getProjection().fromDivPixelToLatLng(botLeftPt);
var ne = overlay.getProjection().fromDivPixelToLatLng(topRightPt);
var overlayBnds = new google.maps.LatLngBounds(sw, ne);
var rectangle = new google.maps.Rectangle({
map: map,
bounds: overlayBnds
})
});
}
/** #constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
I am trying to make the original map which contains the roads that doesn't written google map for mobile devices.
In other words I want to mix my original hand writing map with google map function(like GPS , pin function or popup information etc)
Is there a good solution or sample for this purpose??
Or I should integrate GPS and popup function by myself??
You can do this adding an overlay to google maps this way
The sample is from google maps docs
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Adding a Custom Overlay</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true"></script>
<script>
// [START region_initialization]
// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.
// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class therefore
// it's simpler to load the API synchronously, using
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Initialize the map and the custom overlay.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 62.323907, lng: -150.109291},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage = 'https://developers.google.com/maps/documentation/' +
'javascript/examples/full/images/talkeetna.png';
// The custom USGSOverlay object contains the USGS image,
// the bounds of the image, and a reference to the map.
overlay = new USGSOverlay(bounds, srcImage, map);
}
// [END region_initialization]
// [START region_constructor]
/** #constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
// [END region_constructor]
// [START region_attachment]
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
// [END region_attachment]
// [START region_drawing]
USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
// [END region_drawing]
// [START region_removal]
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
// [END region_removal]
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I'm looking for a way to make marker shadows work with the "visual refresh" that's coming to Google Maps, but can't seem to.
I suppose the following is the recommended way to do it:
https://developers.google.com/maps/tutorials/customizing/custom-markers
Can anyone see the marker shadows in the examples on that tutorial? I can't.
What are you guys doing to make this work?
Thanks in advance!
One option for adding shadows to post visual refresh Google Maps Javascript API v3 maps:
create a Custom Overlay to hold the shadow image attached to the "overlayShadow" pane
add one for every marker
proof of concept
Add markers with shadows like this:
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: getMarkerImage(beach[4]),
shape: iconShape,
title: beach[0],
zIndex: Math.round(myLatLng.lat()*-100000)<<5
});
var shadow = new MarkerShadow(myLatLng, iconShadow, map);
marker.bindTo('map',shadow,'map');
MarkerShadow code (modified from Google's Custom Overlay example):
MarkerShadow.prototype = new google.maps.OverlayView();
/** #constructor */
function MarkerShadow(position, options, map) {
// Initialize all properties.
this.posn_ = position;
this.map_ = map;
if (typeof(options) == "string") {
this.image = options;
} else {
this.options_ = options;
if (!!options.size) this.size_ = options.size;
if (!!options.url) this.image_ = options.url;
}
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
MarkerShadow.prototype.onAdd = function() {
// if no url, return, nothing to do.
if (!this.image_) return;
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = this.options_.size.x + 'px';
img.style.height = this.options_.size.y +'px';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayShadow.appendChild(div);
};
MarkerShadow.prototype.draw = function() {
// if no url, return, nothing to do.
if (!this.image_) return;
// 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.
var overlayProjection = this.getProjection();
var posn = overlayProjection.fromLatLngToDivPixel(this.posn_);
// Resize the image's div to fit the indicated dimensions.
if (!this.div_) return;
var div = this.div_;
if (!!this.options_.anchor) {
div.style.left = Math.floor(posn.x-this.options_.anchor.x) + 'px';
div.style.top = Math.floor(posn.y-this.options_.anchor.y) + 'px';
}
if (!!this.options_.size) {
div.style.width = this.size_.x + 'px';
div.style.height = this.size_.y + 'px';
}
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
MarkerShadow.prototype.onRemove = function() {
if (!this.div_) return;
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
Why not create an extra marker with lower z-index?
createMarkerShadow = function(map, data) {
var latLng = new google.maps.LatLng(data.latitude, data.longitude);
var markerShadow = new google.maps.Marker({
clickable: false,
position: latLng,
map: map,
icon:{
url: '/frontend/img/icons/google-map-marker-shadow.svg',
//The size image file.
size: new google.maps.Size(225, 120),
//The point on the image to measure the anchor from. 0, 0 is the top left.
origin: new google.maps.Point(0, 0),
//The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
anchor: new google.maps.Point(115, 82)
},
zIndex: (Math.round(latLng.lat()*-100000)<<5)-1
});
return markerShadow;
};
setMarkerShadows = function (map, locations, bound) {
for (var i = 0; i < locations.length; i++) {
var data = locations[i];
var markerShadow = createMarkerShadow(map, data);
bound.extend(markerShadow.getPosition());
}
};
bound = new google.maps.LatLngBounds();
I want to display a circle like in this sample:
https://developers.google.com/maps/documentation/javascript/examples/circle-simple?hl=en
I do not want to use clustered markers as I really just need to display some circles with a
number inside.
UPDATE
That is my code:
$(document).ready(function() {
//Google maps API initialisation
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
/* constructor */
function USGSOverlay(bounds, map, alarmnumber) {
// Now initialize all properties.
this.bounds_ = bounds;
this.map_ = map;
this.alarmnumber_ = alarmnumber;
// We define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay
this.setMap(map);
}
USGSOverlay.prototype.onAdd = function() {
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
div.style.border = '1px solid #000';
div.style.fontWeight = 'bold';
div.style.backgroundColor = '#fff';
$(div).attr('id', 'alarmDiv' + this.alarmnumber_);
$(div).addClass("circle");
$(div).addClass("center");
// Set the overlay's div_ property to this DIV
this.div_ = div;
this.div_.innerHTML = this.alarmnumber_;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayLayer pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
USGSOverlay.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.div_;
div.style.left = (sw.x - 20) + 'px';
div.style.top = (ne.y - 20) + 'px';
div.style.width = 40 + 'px';
div.style.height = 40 + 'px';
};
var element = document.getElementById("map");
var map = new google.maps.Map(element, {
center: new google.maps.LatLng(48.705236, 9.128566), // Latitude/Breitengrad , Longitude/Längengrad
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP, // Google maps provider
//mapTypeId: "OSM", // OpenStreetMap provider
mapTypeControl: false,
streetViewControl: false
});