Link to the map : http://2dynamic.com.au/glebe/maps-aamp-guides.html
I am new to I am new to google maps..Need some help in printing the google maps with numbered markers.
In the above mentioned link..we have dynamic markers in maps view..When i click on the print current map view..I need the map to be loaded with dynamically numbered markers..I hope it is possible to make it.
Better if someone can show some coding example..
Thanks in advance...
Another option to what Alex suggested may be to use a set of numbered icons, such as one of the sets provided at the following site:
Then you should be able to do the following (using the v3 API):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Demo</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var image;
for (var i = 0; i < locations.length; i++) {
image = new google.maps.MarkerImage('marker' + i + '.png',
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
new google.maps.Marker({
position: new google.maps.LatLng(location[1], location[2]),
map: map,
icon: image,
title: location[0],
zIndex: location[3]
});
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();">
<div id="map" style="width:400px; height:500px;"></div>
</body>
</html>
Screenshot from the above example:
Note that you can easily add a shadow behind the markers. You may want to check the example at the Google Maps API Reference: Complex Markers for more info about this.
Porting this example to the v2 API should be quite straight forward. Let me know if you would need assistance with this.
Hi daniel thanks for your reply..Actually i checked your script even before posting..but i am not sure how to replace it to my need..This is my script can you please have a look over it,as i am new to google maps..i tried a lot..but cant fix it out...
function updateImage(todo) {
var baseUrl = "http://maps.google.com/maps/api/staticmap?";
var params = [];
params.push("center=" + map.getCenter().lat().toFixed(6) + "," + map.getCenter().lng().toFixed(6));
params.push("zoom=" + map.getZoom());
var markerSize = "";
var markerColor = "";
var markerLetter = "label:" + catfirstLetter;
var markerParams = [];
if (markerSize != "") markerParams.push(markerSize);
if (markerColor != "") markerParams.push(markerColor);
if (markerLetter != "") markerParams.push(markerLetter);
var markersArray = [];
for (var i = 0; i < markers.length; i++) {
markersArray.push(markers[i].getLatLng().lat().toFixed(6) + "," + markers[i].getLatLng().lng().toFixed(6));
}
if (markersArray.length) {
var markersString = markerParams.join("|");
if (markerParams.length) markersString += "|";
markersString += markersArray.join("|");
params.push("markers=" + markersString);
}
var polyColor = "color:0x" + "0000FF" + 80;
var polyWeight = "weight:" + 5;
var polyParams = polyColor + "|" + polyWeight;
for (var i = 0; i < polys.length; i++) {
var poly = polys[i];
var polyLatLngs = [];
for (var j = 0; j < poly.getVertexCount(); j++) {
polyLatLngs.push(poly.getVertex(j).lat().toFixed(5) + "," + poly.getVertex(j).lng().toFixed(5));
}
params.push("path=" + polyParams + "|" + polyLatLngs.join("|"));
}
if (map.getCurrentMapType() == G_SATELLITE_MAP) {
params.push("maptype=satellite");
}
if (map.getCurrentMapType() == G_HYBRID_MAP) {
params.push("maptype=hybrid");
}
if (map.getCurrentMapType() == G_PHYSICAL_MAP) {
params.push("maptype=terrain");
}
params.push("size=" + static_mapwidth + "x" + static_mapheight);
var img = document.createElement("img");
img.src = baseUrl + params.join("&") + "&sensor=false&key=" + api_key ;