homepage Welcome to WebmasterWorld Guest from 54.237.98.229
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / WebmasterWorld / Webmaster General
Forum Library, Charter, Moderators: phranque

Webmaster General Forum

    
I need a Numbered Map
Any good ideas on creating a numbered map?
BigAdventure

5+ Year Member



 
Msg#: 3470443 posted 11:17 pm on Oct 5, 2007 (gmt 0)


My first time creating a map for a website.

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)

 

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3470443 posted 8:20 pm on Oct 8, 2007 (gmt 0)

The documentation can be a little daunting, so the best advice is to work with their examples [google.com] and modify them to meet your needs.

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].

BigAdventure

5+ Year Member



 
Msg#: 3470443 posted 1:45 am on Oct 9, 2007 (gmt 0)


Thanks Bil

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

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3470443 posted 8:01 am on Oct 9, 2007 (gmt 0)

Well, that is on their examples pages too [google.com]. :-)

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&amp;v=2&amp;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(); } };

phranque

WebmasterWorld Administrator phranque us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



 
Msg#: 3470443 posted 8:40 am on Oct 9, 2007 (gmt 0)

with apologies to rocknbil:
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]

BigAdventure

5+ Year Member



 
Msg#: 3470443 posted 5:37 pm on Oct 9, 2007 (gmt 0)


Hey thanks tons for the guidance guys

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3470443 posted 5:53 pm on Oct 9, 2007 (gmt 0)

haha . . . phranque did you get that to work? For whatever reason I couldn't get the markers to work in an array, which is why I stored them in mk1 and mk2. No apologies required, it was just an example. :-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Webmaster General
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved