I'm trying to use the MarkerCluster Javascript witnin a page, where my
markers are taken from an Postgis-database (the php-code is in the JS
integrated? which might not be correct, but it works?).
Actually I'm still developing on localhost.
My Markers are created via the script makeMarker() ver 0.2 from Esa
2009 (see below).
With this code, the markes and the sidebar is created, but there is no
clustering of the data??
Maybe someone out there can help me to fix that problem.
Thanks a lot.
and happy New Year 2012
Georges
_____________ Here is the code I use:
function initialize() {
/**
* map
*/
var mapOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID,
scaleControl: true,
scrollwheel: true
}
var map = new google.maps.Map(document.getElementById("map"),
mapOpts);
// We set zoom and center later by fitBounds()
/**
* makeMarker() ver 0.2
* creates Marker and InfoWindow on a Map() named 'map'
* creates sidebar row in a DIV 'sidebar'
* saves marker to markerArray and markerBounds
* @param options object for Marker, InfoWindow and SidebarItem
* @author Esa 2009
*/
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];
var markerCluster = new MarkerClusterer(map, markerArray);
function makeMarker(options){
var pushPin = new google.maps.Marker({map:map});
pushPin.setOptions(options);
google.maps.event.addListener(pushPin, "click", function(){
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
if(this.sidebarButton)this.sidebarButton.button.focus();
});
var idleIcon = pushPin.getIcon();
if(options.sidebarItem){
pushPin.sidebarButton = new SidebarItem(pushPin, options);
pushPin.sidebarButton.addIn("sidebar");
}
markerBounds.extend(options.position);
markerArray.push(pushPin);
return pushPin;
}
google.maps.event.addListener(map, "click", function(){
infoWindow.close();
});
/**
* Creates an sidebar item
* @constructor
* @author Esa 2009
* @param marker
* @param options object Supported properties: sidebarItem,
sidebarItemClassName, sidebarItemWidth,
*/
function SidebarItem(marker, opts){
var tag = opts.sidebarItemType || "button";
var row = document.createElement(tag);
row.innerHTML = opts.sidebarItem;
row.className = opts.sidebarItemClassName || "sidebar_item";
row.style.display = "block";
row.style.width = opts.sidebarItemWidth || "200px";
row.onclick = function(){
google.maps.event.trigger(marker, 'click');
}
row.onmouseover = function(){
google.maps.event.trigger(marker, 'mouseover');
}
row.onmouseout = function(){
google.maps.event.trigger(marker, 'mouseout');
}
this.button = row;
}
// adds a sidebar item to a <div>
SidebarItem.prototype.addIn = function(block){
if(block && block.nodeType == 1)this.div = block;
else
this.div = document.getElementById(block)
|| document.getElementById("sidebar")
|| document.getElementsByTagName("body")[0];
this.div.appendChild(this.button);
}
// deletes a sidebar item
SidebarItem.prototype.remove = function(){
if(!this.div) return false;
this.div.removeChild(this.button);
return true;
}
/*
* makeMarker is set toghether via php from Postgis-database
* Limit 50, cause only 59 records are shown ???
*/
<?php
require("connect.php");
$query = "SELECT gid,sorte_de,obstart,
st_y(st_astext(st_transform(the_geom,4326)))||','||
st_x(st_astext(st_transform(the_geom,4326))) AS latlng
FROM sorten_all
WHERE sorte_de like '%".$_POST["sorte"]."%' LIMIT 50";
$res = pg_exec($db_handle, $query);
while ($row = pg_fetch_array($res, NULL, PGSQL_ASSOC)){
echo 'makeMarker({position: new google.maps.LatLng('.
$row['latlng'] .'),';
echo 'title: "'. $row['sorte_de'].'",';
echo 'sidebarItem: "'. $row['sorte_de'] .'",';
echo 'content: "'. $row['sorte_de']. '"});'."\n";
}
pg_free_result($res);
?>
/**
* fit viewport to markers
*/
map.fitBounds(markerBounds);
}
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
