Google Map advance technique
posted under
by G S Lakmal
Add multiple markers
The GMarker constructor takes a GLatLng and an optional GMarkerOptions objects as arguments.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Add 10 markers to the map at random locations var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i point =" new">
Using the Marker Manager
Adding a large number of markers to a Google map may both slow down rendering of the map and introduce too much visual clutter, especially at certain zoom levels. The marker manager utility provides a solution to both of these issues, allowing efficient display of hundreds of markers on the same map and the ability to specify at which zoom levels markers should appear.
To use a marker manager, create a MarkerManager object. In the simplest case, just pass a map to it.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(41, -98), 4);
var mgr = new MarkerManager(map);
maxZoom: specifies the maximum zoom level monitored by this marker manager. The default value is the highest zoom level supported by Google maps.
borderPadding: specifies the extra padding, in pixels, monitored by the manager outside the current viewport. This allows for markers just out of sight to be displayed on the map, improving panning over small ranges. The default value is 100.
trackMarkers: specifies whether movement of movements of markers should be tracked by the marker manager. If you wish to have managed markers that change their positions through the setPoint() method, set this value to true. By default, this flag is set to false. Note that if you move markers with this value set to false, they will appear in both the original location and the new location(s).
The MarkerManagerOptions object is an object literal, so you simply declare the object without a constructor:
var map = new GMap2(document.getElementById("map_canvas"));
var mgrOptions = { borderPadding: 50, maxZoom: 15, trackMarkers: true };
var mgr = new MarkerManager(map, mgrOptions);
Adding markers collectively using addMarkers() is recommended as it is more efficient. Markers added using the addMarkers() method will not appear on the map until you explicitly call the MarkerManager's refresh() method, which adds all markers within the current viewport and border padding region to the map. After this initial display, MarkerManager takes care of all visual updates by monitoring the map's "moveend" events.
function setupMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(41, -98), 4);
window.setTimeout(setupWeatherMarkers, 0);
}
}
function getWeatherMarkers(n) {
var batch = [];
for (var i = 0; i < n; ++i) {
batch.push(new GMarker(getRandomPoint(), { icon: getWeatherIcon() }));
}
return batch;
}
function setupWeatherMarkers() {
mgr = new MarkerManager(map);
mgr.addMarkers(getWeatherMarkers(20), 3);
mgr.addMarkers(getWeatherMarkers(200), 6);
mgr.addMarkers(getWeatherMarkers(1000), 8);
mgr.refresh();
}
The GMarker constructor takes a GLatLng and an optional GMarkerOptions objects as arguments.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Add 10 markers to the map at random locations var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i point =" new">
Using the Marker Manager
Adding a large number of markers to a Google map may both slow down rendering of the map and introduce too much visual clutter, especially at certain zoom levels. The marker manager utility provides a solution to both of these issues, allowing efficient display of hundreds of markers on the same map and the ability to specify at which zoom levels markers should appear.
To use a marker manager, create a MarkerManager object. In the simplest case, just pass a map to it.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(41, -98), 4);
var mgr = new MarkerManager(map);
maxZoom: specifies the maximum zoom level monitored by this marker manager. The default value is the highest zoom level supported by Google maps.
borderPadding: specifies the extra padding, in pixels, monitored by the manager outside the current viewport. This allows for markers just out of sight to be displayed on the map, improving panning over small ranges. The default value is 100.
trackMarkers: specifies whether movement of movements of markers should be tracked by the marker manager. If you wish to have managed markers that change their positions through the setPoint() method, set this value to true. By default, this flag is set to false. Note that if you move markers with this value set to false, they will appear in both the original location and the new location(s).
The MarkerManagerOptions object is an object literal, so you simply declare the object without a constructor:
var map = new GMap2(document.getElementById("map_canvas"));
var mgrOptions = { borderPadding: 50, maxZoom: 15, trackMarkers: true };
var mgr = new MarkerManager(map, mgrOptions);
Adding markers collectively using addMarkers() is recommended as it is more efficient. Markers added using the addMarkers() method will not appear on the map until you explicitly call the MarkerManager's refresh() method, which adds all markers within the current viewport and border padding region to the map. After this initial display, MarkerManager takes care of all visual updates by monitoring the map's "moveend" events.
function setupMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(41, -98), 4);
window.setTimeout(setupWeatherMarkers, 0);
}
}
function getWeatherMarkers(n) {
var batch = [];
for (var i = 0; i < n; ++i) {
batch.push(new GMarker(getRandomPoint(), { icon: getWeatherIcon() }));
}
return batch;
}
function setupWeatherMarkers() {
mgr = new MarkerManager(map);
mgr.addMarkers(getWeatherMarkers(20), 3);
mgr.addMarkers(getWeatherMarkers(200), 6);
mgr.addMarkers(getWeatherMarkers(1000), 8);
mgr.refresh();
}
Posts
Comment Form under post in blogger/blogspot