I am trying to move into a more dynamic approach for my personal website, which includes a google map that I have been creating manually each time I add new information.
As a side note, I have created a dynamic page that pulls in information from mysql for just two points, in a polyline, but nothing of this caliber and I’m running into problems on how best to accomplish this task. So any help, ideas, thoughts would be most appreciative…
Now on with the show.
I have the following script that works with just two points, pulled from a mysql_result on a single php page. It works exactly the way I want it to and I spent a really really long time developing & enhancing it…
<script src='http://maps.googleapis.com/maps/api/js?omited&sensor=false'></script>
<script>
/* ***** Start CustomMarker ***** */
function CustomMarker(latlng, map, marker_id, hovercard) {
this.latlng_ = latlng;
this.marker_id = marker_id;
this.hovercard_content = hovercard;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var me = this;
var div = this.div_;
if (!div) {
div = this.div_ = document.createElement('DIV');
div.id=me.marker_id;
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
div.className = 'map-marker show-hovercard';
div.style.left = (point.x-6) + 'px';
div.style.top = (point.y-23) + 'px';
$(div).attr('data-hovercard-content', me.hovercard_content);
}
};
CustomMarker.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
CustomMarker.prototype.getPosition = function() {
return this.latlng_;
};
/* ***** End CustomMarker ***** */
/* ***** Start CustomMarker Aankomst ***** */
function CustomMarkerAankomst(latlng, map, marker_id, hovercard) {
this.latlng_ = latlng;
this.marker_id = marker_id;
this.hovercard_content = hovercard;
this.setMap(map);
}
CustomMarkerAankomst.prototype = new google.maps.OverlayView();
CustomMarkerAankomst.prototype.draw = function() {
var me = this;
var div = this.div_;
if (!div) {
div = this.div_ = document.createElement('DIV');
div.id=me.marker_id;
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
div.className = 'map-marker-aankomst show-hovercard';
div.style.left = (point.x-6) + 'px';
div.style.top = (point.y-23) + 'px';
$(div).attr('data-hovercard-content', me.hovercard_content);
}
};
CustomMarkerAankomst.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
CustomMarkerAankomst.prototype.getPosition = function() {
return this.latlng_;
};
/* ***** End CustomMarker Aankomst ***** */
function initialize() {
var markers = [];
var bounds = new google.maps.LatLngBounds();
var myOptions = {
center: new google.maps.LatLng(20, 20),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID,
panControl: false,
streetViewControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
pos = new google.maps.LatLng(".$row['vertreklat'].",".$row['vertreklong'].");
overlay = new CustomMarker(pos, map, 'marker_KMSP', '".$row['luchthavennaam']."');
overlay.setMap(map);
bounds.extend(pos);
pos = new google.maps.LatLng(".$row['aankomstlat'].",".$row['aankomstlong'].");
overlay = new CustomMarkerAankomst(pos, map, 'marker_RJAA', '".$row['naamaankomst']."');
overlay.setMap(map);
bounds.extend(pos);
var flightPath = new google.maps.Polyline({path: [new google.maps.LatLng(".$row['vertreklat'].", ".$row['vertreklong']."),new google.maps.LatLng(".$row['aankomstlat'].", ".$row['aankomstlong'].")], strokeColor: '#FFBF00', strokeOpacity: 0.8, strokeWeight: 3, geodesic: true });
flightPath.setMap(map);
map.fitBounds(bounds); google.maps.event.addListener(map, 'zoom_changed', function() {
if(map.getZoom()<2) {
map.setZoom(2);
}
});
}
$(document).ready(function() {
initialize();
});
</script>
Using the tutorial that Google Provides for feeding xml, I have come up with the following bit of php that produces an xml generated response.
<?php
require("OMITED.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\\'t use db : ' . mysql_error());
}
mysql_query("SET CHARACTER SET 'utf8';");//GET and POST
mysql_query("SET NAMES 'utf8';");//POST
// Select all the rows in the markers table
$query = "SELECT vg.gegevenID, vg.vertrekdatum2, lh.luchthavennaam, lh.latitudedecimal AS vertreklat, lh.longitudedecimal AS vertreklong, lh2.luchthavennaam AS naamaankomst, lh2.latitudedecimal AS aankomstlat, lh2.longitudedecimal AS aankomstlong
from tbl_vluchtgegevens vg
left join tbl_luchthaven lh
on vg.vertrekluchthaven = lh.luchthavenID
left join tbl_luchthaven lh2
on vg.aankomstluchthaven = lh2.luchthavenID
WHERE vertrekdatum2 <=NOW()
Order by vertrekdatum2 ASC";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<flightpath>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<flightpath ';
echo 'vertrekLuchthaven="' . parseToXML($row['luchthavennaam']) . '" ';
echo 'vertreklat="' . $row['vertreklat'] . '" ';
echo 'vertreklong="' . $row['vertreklong'] . '" ';
echo 'aankomstLuchthaven="' . parseToXML($row['naamaankomst']) . '" ';
echo 'aankomstlat="' . $row['aankomstlat'] . '" ';
echo 'aankomstlong="' . $row['aankomstlong'] . '" ';
echo '/>';
}
// End XML file
echo '</flightpath>';
?>
Now I am trying to figure out how to use the xml data in a script that is similar above, which is where I am running into problems… because, well, I’m unfamiliar with how to best manipulate the code… This is where I am hoping I can get some advice…
I’m particularly interested in getting the following 2 components to populate.
pos = new google.maps.LatLng(".$row['vertreklat'].",".$row['vertreklong'].");
overlay = new CustomMarker(pos, map, 'marker_1234', '".$row['vertrekLuchthaven']."');
overlay.setMap(map);
bounds.extend(pos);
pos = new google.maps.LatLng(".$row['aankomstlat'].",".$row['aankomstlong'].");
overlay = new CustomMarker(pos, map, 'marker_1234', '".$row['aankomstLuchthaven']."');
overlay.setMap(map);
bounds.extend(pos);
var flightPath = new google.maps.Polyline({path: [new google.maps.LatLng(".$row['vertreklat'].", ".$row['vertreklong']."),new google.maps.LatLng(".$row['aankomstlat'].", ".$row['aankomstlong'].")], strokeColor: '#FFBF00', strokeOpacity: 0.8, strokeWeight: 3, geodesic: true });
flightPath.setMap(map);
Any advice would be great… <snip/>