How to put Numbers on Google Map API markers?
i'm using GoogleMap API in my project where the position of a particular vehicle is rendered by using data in the DB, i have already implemented this, MY question is if its possible to get numbers on the Markers,e.x Vehicle A has been in 100 places from 1 to 2 of Decembre, i would like having numbers starting from 1 to 100 kinda showing its path,This is the create marker function of my Google API:
function createMarker(point, IMEI, Velocity, Ora, Data) {
var marker = new GMarker(p开发者_如何学Coint, iconBlue);
var html = "<b>" + "Ora: " + "</b>" + Ora + "<br/>" + "<b>" + "Data: " + "</b>"+ Data + "<br/>" + "<b>" + "Velocità: " + "</b>" + Velocity + " km/h" ;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html); });
return marker;
}
This is the code used whose output is used by the googmapsapi.html, the output is a simple xml file with a number of number of "markers" tags containig info such as long,lat,date and time, could this list be used somehow to get the numbers out?
// Opens a connection to a MySQL server
$connection=mysql_connect ("localhost","root","alphabravo");
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysql_select_db("tracciasat", $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
//$query = "SELECT * FROM sessione WHERE 1";
$query = "SELECT * FROM sessione WHERE Dat BETWEEN '$_GET[strt]' AND '$_GET[end]' AND IMEI = '$_GET[id]'";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'IMEI="' . parseToXML($row['IMEI']) . '" ';
echo 'Velocity="' . parseToXML($row['Velocity']) . '" ';
echo 'Ora="' . parseToXML($row['Ora']) . '" ';
echo 'Data="' . parseToXML($row['Dat']) . '" ';
echo 'lat="' . $row['Latitudine'] . '" ';
echo 'lng="' . $row['Longitudine'] . '" ';
//echo 'type="' . $row['type'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
}
I would like to add the code regarding the Icon, which in my case is a blueIcon:
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
Thanks for your time!
Check the following url to customize your markers icons :
http://groups.google.com/group/Google-Maps-API/web/examples-tutorials-custom-icons-for-markers?pli=1
Okay guys,following the link by @ChristopheCVB i accomplished it! Lemme share the code incase somebody needs in the future
This code basically creates 1000 icons with numbers ranging from 1 to 1000 written on them, a javascript file mapiconmaker.js is needed so either download it and put it together with other website files,
type="text/javascript"></script>
<script src="mapiconmaker.js" language="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = [1000];
for(var j=0;j<1000;j++){
var iconOptions = {};
iconOptions.primaryColor = "#0000FF";
iconOptions.strokeColor = "#000000";
iconOptions.label = j.toString().replace();
iconOptions.labelColor = "#000000";
iconOptions.addStar = false;
iconOptions.starPrimaryColor = "#FFFF00";
iconOptions.starStrokeColor = "#0000FF";
customIcons[j] = MapIconMaker.createLabeledMarkerIcon(iconOptions);
}
Afterwards i use these markers when the googlemap api javascript function is rendering the map and when it is assigning the markers to each location that code is here:
GDownloadUrl("second.php?strt="+ysdate+"/"+msdate+"/"+dsdate+"&end="+yedate+"/"+medate+"/"+dedate+"&id="+ide, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var IMEI = markers[i].getAttribute("IMEI");
var Velocity = markers[i].getAttribute("Velocity");
var Ora = markers[i].getAttribute("Ora");
var Data = markers[i].getAttribute("Data");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, IMEI, Velocity, Ora, Data, i);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, IMEI, Velocity, Ora, Data, i) {
var marker = new GMarker(point, customIcons[i]);
var html = "<b>" + "Ora: " + "</b>" + Ora + "<br/>" + "<b>" + "Data: " + "</b>"+ Data + "<br/>" + "<b>" + "Velocità: " + "</b>" + Velocity + " km/h" ;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html); });
return marker;
}
I'm new to this site, but really love the spirit of getting free and fast help from experts, i will surely contribute as the time goes to atleast give back abit of what i get.Thanks everybody!
I'm pretty sure the API doesn't support numbering the markers. I can think of two unsatisfying alternatives.
- Set the zIndex, and then display the zIndex as the marker's title.
- Use setIcon to change MarkerImage to a numbered graphic.
I usually have better answers than this one. I think I'm having an "off" day.
There is no need to make a custom marker because Goolge has the Google Chart Api: http://code.google.com/intl/de/apis/chart. I use it to create numbered icons in my applications. It saves me a lot of headache.
精彩评论