Forum Moderators: phranque
I found Google Map API but can't find an easy way to number the push pins.
Is there a better way?
I need the map points to correspond to a list on the same page.
Thanks in advance to all :o)
Really, all you'll have to do is get the lat/long. for each of the points on your page and add those points to your map. Something like this [google.com].
I got the map that looks like your example, but I would like for the pins to be numbered and correspond with numbered items on a list, so it is easy for people to connect the two.
Any ideas
Thanks again
Keep digging - for even more customization, there are documents there that instruct how to create your own custom icons for the pins. You have to create transparent .png's to get the shadows to work. The process is a bit too complex to explain in a post, it's all in the documentation, but here is some homogenized code I used recently. It constructs two maps on a page with custom icons but only places **one** pin on the map and uses the custom icon for the pin.
The page head contains the link to the map API with your key.
This first line is ALL ON ONE LINE, remove the _:
<script type="text/javascript" src="http://maps.google.com/maps?
_file=api&v=2&key=****your_key***"></script>
The head also contains the link to the javascript code below:
<script type="text/javascript" src="g-map.js"></script>
The object where your map(s) display(s,) in the body. I have two.
You are supposed to use onload/onUnload functions in the body,
but you don't need to - see below.
<div id="my_map1"></div>
<div id="my_map2"></div>
Contents of g-map.js, homogenized:
// define arrays to hold the map elements. In this example,
// I'm using one icon. Note the loop below, how it switches
// between html[x] for the text and and coordX[x]/coordY[y]
// for the geo coordinates. Use the same logic to use multiple icons.
var obj = new Array('my_map1','my_map2'); // map id's above
var coordX = new Array('123.456','789.1011'); // geocoordinates
var coordY = new Array('-123.456','-789.1011');
var html = new Array(); // holds pop-up text info
var maps = new Array(); // map objects
// mk1 and mk2 are the marker objects. currObj is a
// temporary variable we will use going through the loop.
var mk1=mk2=currObj=null;
html[0] = '<h4>Company name, location 1</h4>\n <strong>address 1<\/strong> <br>';
html[1] = '<h4>Company name, location 2</h4> \n <strong>address 2<\/strong> <br>';
The load function:
function load() {
if (GBrowserIsCompatible()) {
// Define icon position, image, and anchors -
//See G's documentation for what each of these do.
var icon = new GIcon(); // icon object
icon.image = "full_url_to_icon.png";
icon.shadow = "full_url_to_icon_shadow.png";
icon.iconSize = new GSize(23, 40);
icon.shadowSize = new GSize(40, 40);
icon.iconAnchor = new GPoint(11, 40);
icon.infoWindowAnchor = new GPoint(11, 1);
// Loop through our map, text, and coordinate arrays to construct
// the maps. Since I have two maps, my loop is only two long. You
// could use this for as many maps on a page as needed.
for (i=0;i<2;i++) {
// begin populating the maps arrays, set markers 1 and 2 (mk1,mk2)
maps[i] = new GMap2(document.getElementById(obj[i]));
maps[i].addControl(new GSmallMapControl());
maps[i].setCenter(new GLatLng(coordX[i],coordY[i]), 15);
if (i==0) {
mk1= new GMarker(maps[i].getCenter(),icon);
GEvent.addListener(mk1, "click", function() {
mk1.openInfoWindowHtml(html[0]);
});
maps[i].addOverlay(mk1);
mk1.openInfoWindowHtml(html[0]);
}
else {
mk2= new GMarker(maps[i].getCenter(),icon);
GEvent.addListener(mk2, "click", function() {
mk2.openInfoWindowHtml(html[1]);
});
maps[i].addOverlay(mk2);
mk2.openInfoWindowHtml(html[1]);
}
}
}
}
// The documentation says to use body onload="load();" and body
// onUnload="GUnload();" You can make an unobtrusive javascript with
// the following function added to your javascript file.
window.onload = function() {
// This "if" allows you to link all pages to this file. It will
// only execute if your map object id exists.you would do
// this if this .js file contains other functions for other pages
// on the site. We only need to check for one of the maps:
if (document.getElementById('my_map1')) { load(); }
};
window.onunload = function() { if (document.getElementById('my_map1')) { GUnload(); } };
Contents of g-map.js, modified for N numbered icons:// define arrays to hold the map elements. In this example,
// I'm using N icons (starting at 1). Note the loop below, how it mostly ignores
// how you got data for your map or your markers.
...
var icons = new Array(); // icon objects
var maps = new Array(); // map objects
var markers = new Array(); // marker objects
...The load function:
function load() {
if (GBrowserIsCompatible()) {// Define icon position, image, and anchors -
//See G's documentation for what each of these do.
for (i=1;i<=N;i++) {
icons[i] = new GIcon(); // icon object
icons[i].image = "full_url_to_icon_"+i+".png";
icons[i].shadow = "full_url_to_icon_"+i+"_shadow.png";
icons[i].iconSize = new GSize(23, 40);
icons[i].shadowSize = new GSize(40, 40);
icons[i].iconAnchor = new GPoint(11, 40);
icons[i].infoWindowAnchor = new GPoint(11, 1);
}// Loop through our object id, numbers and coordinate arrays to construct
// the maps. You could use this for as many maps on a page as needed.
for (i=0; ... ;i++) {
// begin populating the maps arrays, set markers based on numbers
maps[i] = new GMap2(document.getElementById(obj[i]));
maps[i].addControl(new GSmallMapControl());
maps[i].setCenter(new GLatLng(coordX[i],coordY[i]), 15);
markers[i] = new GMarker(maps[i].getCenter(),icon[numbers[i]]);
GEvent.addListener(markers[i], "click", function() {
markers[i].openInfoWindowHtml(html[i]);
});
maps[i].addOverlay(markers[i]);
markers[i].openInfoWindowHtml(html[i]);
}
}
}
[edits]a few js bugs[/edits]
