Hi, I wonder whether someone may be able to help me please with a
query I have around the plotting of co-ordinates on a Google Maps.
I'm using the code below to plot markers from a mysql database onto a
Google map via a PHP script which also incorporates a sidebar.
// A function to create the marker and set up the event window
function createMarker(latlng,locationname,html,totalfinds)
{
var contentString = html;
var icon = customIcons[totalfinds] || {};
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: icon.icon,
shadow: icon.shadow,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
// === Store the category and name info as a marker
properties ===
marker.mycategory =
totalfinds;
marker.myname = locationname;
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function()
{
detailDiv.style.width = '200px';
detailDiv.style.height = '200px';
document.getElementById('map').appendChild(detailDiv);
// Creating MapOptions for the overview map
var overviewOpts = {
zoom: 14,
center: marker.getPosition(),
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true
};
var detailMap = new google.maps.Map(detailDiv,
overviewOpts);
// Create a marker that will show in the detail map
var detailMarker = new google.maps.Marker({
position: marker.getPosition(),
map: detailMap,
clickable: false
});
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
// == shows all markers of a particular category, and
ensures the checkbox is checked ==
function show(totalfinds) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == totalfinds) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(totalfinds+"box").checked = true;
}
// == hides all markers of a particular category, and
ensures the checkbox is cleared ==
function hide(totalfinds) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == totalfinds) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(totalfinds+"box").checked =
false;
// == close the info window, in case its open on a marker
that we just hid
infowindow.close();
}
// == a checkbox has been clicked ==
function boxclick(box,totalfinds) {
if (box.checked) {
show(totalfinds);
} else {
hide(totalfinds);
}
// == rebuild the side bar
makeSidebar();
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i],"click");
}
// == rebuilds the sidebar to match the markers currently
displayed ==
function makeSidebar() {
var html = "";
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
html += '<a href="javascript:myclick(' + i + ')">' +
gmarkers[i].myname + '<\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = html;
}
function load() {
var myOptions = {
zoom:6,
center: new
google.maps.LatLng(54.312195845815246,-4.45948481875007),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
downloadUrl("lphpfile.php", function(data) {
var xml = data.responseXML;
var markers =
xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat =
parseFloat(markers[i].getAttribute("osgb36lat"));
var lng =
parseFloat(markers[i].getAttribute("osgb36lon"));
var point = new google.maps.LatLng(lat,lng);
var locationname =
markers[i].getAttribute("locationname");
var address = markers[i].getAttribute("address");
var totalfinds = markers[i].getAttribute("totalfinds");
var html = detailDiv
// create the marker
var marker =
createMarker(point,locationname,html,totalfinds);
bounds.extend(point);
map.fitBounds(bounds);
}
// == show or hide the categories initially ==
show("Finds made");
hide("No finds made");
// == create the initial sidebar ==
makeSidebar();
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
All works as it should but I've now got a problem which I don't know
how to resolve.
I now have a second set of static co-ordinates that I want to show on
the same map, but I don't want them to appear in the sidebar. They are
from the same database but are in a separate table to the one which
populates the above, and have different fields names. I know that I
can pull together data from many tables in the PHP script which feeds
into the above page, but I don't know how to add another complete set
of co-ordinates onto the same map.
I've done quite a bit of searching on the Interent and I wondered
whether a KML file would work. I just wondered whether someone could
provide some guidance on the best way forward.
Many thanks and kind regards
--
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.
