Need someone to look over small snippet of code.

Alright, so this is my problem summed up: I'm trying to implement a custom Google maps onto a website with my own markers that I have set through coordinates. The default markers work absolutely fine and when they are clicked on, a info window pops up displaying whatever I want it to display. My problem stems from when I try to add my own custom markers. I can add the markers just fine to the map, but for some reason the info windows will not pop up on the new markers. If someone could look at this code real quick and point me in the right direction that would be appreciated tremendously.

Below is the code before I add my custom marker bit:

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.centerAndZoom(new GPoint(-71.070814, 42.35607), 4);

// Creates a marker whose info window displays the given number
function createMarker(point, number)
{
var marker = new GMarker(point);

// Show this markers index in the info window when it is clicked
var html = number;
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
return marker;
};

Code (markup):

Below is the default marker itself:

var point = new GPoint(-71.06277,42.35346);
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/rit.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Ritz Carlton Boston Common</b><br>1-3 Avery St<br>Boston, MA 02116<br><br><a href=/Ritz_Carlton_Boston.html>More Details</a></td></tr></div>');
map.addOverlay(marker);

Code (markup):

Below is the custom marker code that I add:

var tinyIcon = new GIcon();
tinyIcon.image = "/greenIcon.png";
tinyIcon.shadow = "/greenIconShadow.png";
tinyIcon.iconSize = new GSize(25, 36);
tinyIcon.shadowSize = new GSize(44, 40);
tinyIcon.iconAnchor = new GPoint(6, 20);
tinyIcon.infoWindowAnchor = new GPoint(5, 1);

markerOptions = { icon:tinyIcon };

Code (markup):

Below is the custom marker itself:

var point = new GPoint(-71.06277,42.35346);
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/rit.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Ritz Carlton Boston Common</b><br>1-3 Avery St<br>Boston, MA 02116<br><br><a href=/Ritz_Carlton_Boston.html>More Details</a></td></tr></div>');
map.addOverlay(new GMarker(point, markerOptions));

Code (markup):

Below is the final code when it's added:

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.centerAndZoom(new GPoint(-71.070814, 42.35607), 4);

// Creates a marker whose info window displays the given number
function createMarker(point, number)
{
var marker = new GMarker(point);

// Show this markers index in the info window when it is clicked
var html = number;
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
return marker;
};




var tinyIcon = new GIcon();
tinyIcon.image = "http://www.bostoncityproperties.com/greenIcon.png";
tinyIcon.shadow = "http://www.bostoncityproperties.com/greenIconShadow.png";
tinyIcon.iconSize = new GSize(25, 36);
tinyIcon.shadowSize = new GSize(44, 40);
tinyIcon.iconAnchor = new GPoint(6, 20);
tinyIcon.infoWindowAnchor = new GPoint(5, 1);

markerOptions = { icon:tinyIcon };

Code (markup):

Please, if someone could help me out in the littlest bit that would be great. What I think I have to do is play around with the arrangement of my code or perhaps it needs to be written differently.

 

not tried any of it but if your code ends like that, no wonder.

shouldn't you call the method for adding the marker?

somethng like map.addOverlay(new GMarker(point, markerOptions));... all you seem to do is just set markerOptions which is simply an object but you need to pass it to the map...

i doubt it's gonna be that simple, prolly an error / omission on the paste from your part.

 

I pasted everything completely. That's all there is.

The custom marker does have map.addOverlay(new GMarker(point, markerOptions));

Is that what you were saying?

I don't understand javascript that well and feel as if it would take me quite some time to learn the syntax and whatnot to get it to do what I want it to do. I'd rather have someone correct what I have wrong so I can learn that way....for the time being for I need to get this fixed immediately.

 

yeah because you did not paste that... in your "final code".

 

I'm sorry, I thought it was implied that default markers and custom markers were also part of the final code. I was only focusing on the bulk of what needs to be edited....or so I believe.

 

i added your omitted code and it works?

_http://442print.co.uk/maptest.html (client site where i had a handy gmaps api id).


btw, you can rewrite this to be nicer like so:

        markerOptions = { 
            icon: new GIcon({
                image: "http://www.bostoncityproperties.com/greenIcon.png",
                shadow: "http://www.bostoncityproperties.com/greenIconShadow.png",
                iconSize: new GSize(25, 36),
                shadowSize: new GSize(44, 40),
                iconAnchor: new GPoint(6, 20),
                infoWindowAnchor: new GPoint(5, 1)
            })
        };

        var point = new GPoint(-71.06277,42.35346);
        var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/rit.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Ritz Carlton Boston Common</b><br>1-3 Avery St<br>Boston, MA 02116<br><br><a href=/Ritz_Carlton_Boston.html>More Details</a></td></tr></div>');
        map.addOverlay(new GMarker(point, markerOptions));

Code (markup):

actually i am playing with it, marker shows but click does not. brb

 

ok this works - in full:

...
    if (GBrowserIsCompatible()) {
        var map = new GMap(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl());
        map.centerAndZoom(new GPoint(-71.070814, 42.35607), 4);
        
        markerOptions = { 
            icon: new GIcon({
                image: "http://www.bostoncityproperties.com/greenIcon.png",
                shadow: "http://www.bostoncityproperties.com/greenIconShadow.png",
                iconSize: new GSize(25, 36),
                shadowSize: new GSize(44, 40),
                iconAnchor: new GPoint(6, 20),
                infoWindowAnchor: new GPoint(5, 1)
            }),
            html: '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/rit.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Ritz Carlton Boston Common</b><br>1-3 Avery St<br>Boston, MA 02116<br><br><a href=/Ritz_Carlton_Boston.html>More Details</a></td></tr></div>'
        };
        
        var point = new GPoint(-71.06277,42.35346);
        var marker = new GMarker(point, markerOptions)
        
        map.addOverlay(marker);
        GEvent.addListener(marker, "click", function() {
           marker.openInfoWindowHtml(markerOptions.html);
        });
   }	

Code (markup):

have fun.

 

Holy shit thank you so much, but after reviewing your code I'm a little confused on some parts.

I only listed 2 different markers, one being the default and the other being the custom (both had the same coordinates, but in reality they will be differenet), but the truth of the matter is, I have like 30 defaults and 30 customs on the same map so after looking at the code you suggested, I don't understand where I would list them while keeping them separate.

 

ok no problem -give me 2-3 more points and values for the options - i will do this is as a function you can call and populate from a DB...

do you have json?

anyway - post here, bbl (need to babysit daughter )

 

I don't have json, no. This is what I have:

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.centerAndZoom(new GPoint(-71.070814, 42.35607), 4);

// Creates a marker whose info window displays the given number
function createMarker(point, number)
{
var marker = new GMarker(point);

// Show this markers index in the info window when it is clicked
var html = number;
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
return marker;
};




var tinyIcon = new GIcon();
tinyIcon.image = "http://www.bostoncityproperties.com/greenIcon.png";
tinyIcon.shadow = "http://www.bostoncityproperties.com/greenIconShadow.png";
tinyIcon.iconSize = new GSize(25, 36);
tinyIcon.shadowSize = new GSize(44, 40);
tinyIcon.iconAnchor = new GPoint(6, 20);
tinyIcon.infoWindowAnchor = new GPoint(5, 1);

markerOptions = { icon:tinyIcon };




var point = new GPoint(-71.06277,42.35346);
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="rit.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Ritz Carlton Boston Common</b><br>1-3 Avery St<br>Boston, MA 02116<br><br><a href=/Ritz_Carlton_Boston.html>More Details</a></td></tr></div>');
map.addOverlay(marker);

var point = new GPoint(-71.06343,42.35448); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="tre.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>Tremont on the Common</b><br>151 Tremont Street<br>Boston, MA 02116<br><br><a href=/Tremont_on_the_Common.html>More Details</a></td></tr></div>');
map.addOverlay(marker);

var point = new GPoint(-71.06369,42.35394); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="gra.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Grandview</b><br>165 Tremont Street<br>Boston, MA 02116<br><br><a href=/Grandview_Boston.html>More Details</a></td></tr></div>');
map.addOverlay(marker);

var point = new GPoint(-71.06383,42.35369); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/par.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Parkside Boston Common</b><br>170 Tremont Street<br>Boston, MA 02116<br><br><a href=/Parkside_Boston.html>More Details</a></td></tr></div>');
map.addOverlay(marker);

var point = new GPoint(-71.08128,42.34901); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/man.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>Mandarin Oriental Residences Boston</b><br>776 Boylston Street<br>Boston, MA 02116<br><br><a href=/Madarin_Oriental_Boston.html>More Details</a></td></tr></div>');
map.addOverlay(marker);

var point = new GPoint(-71.05984,42.35713); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/45.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>45 Province Boston Condos</b><br>45 Province Street<br>Boston, MA 02116<br><br><a href=/45_Province_Boston.html>More Details</a></td></tr></div>');
map.addOverlay(marker);

var point = new GPoint(-71.07826,42.34872); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/tri.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>Trinity Place Boston</b><br>1 Huntington Ave<br>Boston, MA 02116<br><br><a href=/Trinity_Place_Boston.html>More Details</a></td></tr></div>');
map.addOverlay(marker);

var point = new GPoint(-71.07414,42.34842); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/cla.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Clarendon Boston</b><br>131 Clarendon Street<br>Boston, MA 02116<br><br><a href=/The_Clarendon_Boston.html>More Details</a></td></tr></div>');
map.addOverlay(marker);

var point = new GPoint(-71.06995,42.34157); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/pen.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>Penny Savings Bank Condos</b><br>30 Union Park Street<br>Boston, MA 02116<br><br><a href=/Penny_Savings_Bank_Condos.html>More Details</a></td></tr></div>');
map.addOverlay(marker);

var point = new GPoint(-71.07125,42.37009); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/reg.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Regatta Riverview Condos</b><br>10 Museum Way<br>Cambridge, MA 02116<br><br><a href=/The_Regatta_Cambridge.html>More Details</a></td></tr></div>');
map.addOverlay(marker);

var point = new GPoint(-71.07581,42.36531); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/esp.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Esplanade</b><br>75-83 Cambridge Parkway<br>Cambridge, MA 02116<br><br><a href=/The_Esplanade_Cambridge.html>More Details</a></td></tr></div>');
map.addOverlay(marker);





var point = new GPoint(-71.087790,42.348258);
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/360.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>360 Newbury</b><br>360 Newbury Street<br>Boston, MA 02116<br><br><a href=/360_Newbury_Street_Lofts_Boston.html>More Details</a></td></tr></div>');
map.addOverlay(new GMarker(point, markerOptions));

var point = new GPoint(-71.07409,42.347087); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/285.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>285 Columbus Lofts</b><br>285 Columbus Ave<br>Boston, MA 02116<br><br><a href=/285_Columbus_Lofts_Boston.html>More Details</a></td></tr></div>');
map.addOverlay(new GMarker(point, markerOptions));

var point = new GPoint(-71.08828,42.34579); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/12.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>12 Stoneholm Lofts</b><br>12 Stoneholm Street<br>Boston, MA 02116<br><br><a href=/12_Stoneholm_Street_Lofts.html>More Details</a></td></tr></div>');
map.addOverlay(new GMarker(point, markerOptions));

var point = new GPoint(-71.07152,42.33813); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/art.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>Art Block</b><br>725 Harrison Ave<br>Boston, MA 02116<br><br><a href=/Art_Block_Boston_Lofts.html>More Details</a></td></tr></div>');
map.addOverlay(new GMarker(point, markerOptions));

var point = new GPoint(-71.06671,42.34311); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/lac.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>Laconia Lofts</b><br>1200 Washington Street<br>Boston, MA 02116<br><br><a href=/Laconia_Lofts.html>More Details</a></td></tr></div>');
map.addOverlay(new GMarker(point, markerOptions));

var point = new GPoint(-71.06838,42.34183); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/wil.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>Wilkes Passage Lofts</b><br>1313 Washington Street<br>Boston, MA 02116<br><br><a href=/Wilkes_Passage_Lofts.html>More Details</a></td></tr></div>');
map.addOverlay(new GMarker(point, markerOptions));

var point = new GPoint(-71.06486,42.34336); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/gat.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>Gateway Terrace Lofts</b><br>25, 35, & 40 Fay Street<br>Boston, MA 02116<br><br><a href=/Gateway_Terrance_Lofts.html>More Details</a></td></tr></div>');
map.addOverlay(new GMarker(point, markerOptions));

var point = new GPoint(-71.06681,42.34191); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/har.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Harrison Lofts</b><br>485 Harrison Ave<br>Boston, MA 02116<br><br><a href=/The_Harrison_Lofts.html>More Details</a></td></tr></div>');
map.addOverlay(new GMarker(point, markerOptions));

var point = new GPoint(-71.06505,42.34347); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/dov.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>Dover Lofts</b><br>139 E. Berkeley Street<br>Boston, MA 02116<br><br><a href=/Dover_Lofts.html>More Details</a></td></tr></div>');
map.addOverlay(new GMarker(point, markerOptions));

var point = new GPoint(-71.08138,42.34347); 
var marker = createMarker(point, '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/mod.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Modern</b><br>255 Northampton Street<br>Boston, MA 02116<br><br><a href=/The_Modern_Boston.html>More Details</a></td></tr></div>');
map.addOverlay(new GMarker(point, markerOptions));

Code (markup):

Some markers will be using the default and others will be using the new custom ones. I was separating the two markers by adding (new GMarker(point, markerOptions)); to the custom ones and that worked...somewhat, but the info window was not working and that's the problem. Thank you so much in advance!

 

	if (GBrowserIsCompatible()) {
        var map = new GMap(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl());
        map.centerAndZoom(new GPoint(-71.070814, 42.35607), 4);
        
        
        var doMarker = function(coordObject) {
            markerOptions = { 
                icon: new GIcon({
                    image: "http://www.bostoncityproperties.com/greenIcon.png",
                    shadow: "http://www.bostoncityproperties.com/greenIconShadow.png",
                    iconSize: new GSize(25, 36),
                    shadowSize: new GSize(44, 40),
                    iconAnchor: new GPoint(6, 20),
                    infoWindowAnchor: new GPoint(5, 1)
                })
                
            };
            
            var marker = new GMarker(new GPoint(coordObject.x,coordObject.y), markerOptions);
            map.addOverlay(marker);
            GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(coordObject.html);
            });    
        }
        
        
        // generate this array from your DB of coordinates and html markup (eg, properties)
        var coords = [{
            x: -71.06277,
            y: 42.35346,
            html: '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="http://www.bostoncityproperties.com/ritz.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Ritz Carlton Boston Common</b><br>1-3 Avery St<br>Boston, MA 02116<br><br><a href=/Ritz_Carlton_Boston.html>More Details</a></td></tr></div>'
        },
        {
            x: -71.04277,
            y: 42.35146,
            html: '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="http://www.bostoncityproperties.com/ritz.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Ritz Carlton Boston Common</b><br>1-3 Avery St<br>Boston, MA 02116<br><br><a href=/Ritz_Carlton_Boston.html>More Details</a></td></tr></div>'
        }
        ]
        
        // this will loop though all of them
        var spots = coords.length;
        while(spots--) {
            doMarker(coords[spots]);
        }
        
        
        
   }	

Code (markup):

just genrate JSON from php for coords array to set all your properties there... as many as you like.
JSON is javascript object notation. basically:

var foo = {
  name: "value",
  name2: "value2",
  something: function() {
     return "value3"
  }
}

Code (markup):

PHP can take an array like:
$foo = array("x" => "20", "y" => "40", "html" => "<div>hi!</div>");
so its
and convert to JSON for you via json_encode().

so you can do $json = json_encode($foo);

which will produce:
{"x": "20", "y": "40", "html": "<div>hi!</div>"} - this is our object.

 

1. I don't know what JSON is?

2. I looked at your code and I THINK the problem is still going to be there. I looked at your example of markers, but how is it going to know which one is the default icon and which one is the custom one?

3. Forgive me for being slow to this.

 

here is the updated example as a PHP / js combo that dynamically fills the data from a DB:

NB: json_encode is a PHP5+ function, this wont work with PHP4 but you can get a substitute one from php.net/json_encode

<?PHP

// simulate data read from a db...
$row[] = array(
            "x" => "-71.06277",
            "y" => "42.35346",
            "html" => '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="http://www.bostoncityproperties.com/ritz.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Ritz Carlton Boston Common</b><br>1-3 Avery St<br>Boston, MA 02116<br><br><a href=/Ritz_Carlton_Boston.html>More Details</a></td></tr></div>');

$row[] = array(
            "x" => "-71.02277",
            "y" => "42.35046",
            "html" => '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="http://www.bostoncityproperties.com/ritz.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Christoff</b><br>1-3 Avery St<br>Boston, MA 02116<br><br><a href=/Ritz_Carlton_Boston.html>More Details</a></td></tr></div>');
            
$row[] = array(
            "x" => "-71.04277",
            "y" => "42.35146",
            "html" => '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="http://www.bostoncityproperties.com/ritz.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Quick Brown Fox jumps over the lazy god</b><br>1-3 Avery St<br>Boston, MA 02116<br><br><a href=/Ritz_Carlton_Boston.html>More Details</a></td></tr></div>');   
            
?>
<script type="text/javascript">
if (GBrowserIsCompatible()) {
     var map = new GMap(document.getElementById("map"));
     map.addControl(new GLargeMapControl());
     map.addControl(new GMapTypeControl());
     map.addControl(new GScaleControl());
     map.centerAndZoom(new GPoint(-71.070814, 42.35607), 4);
     
     
     var doMarker = function(coordObject) {
         markerOptions = { 
             icon: new GIcon({
                 image: "http://www.bostoncityproperties.com/greenIcon.png",
                 shadow: "http://www.bostoncityproperties.com/greenIconShadow.png",
                 iconSize: new GSize(25, 36),
                 shadowSize: new GSize(44, 40),
                 iconAnchor: new GPoint(6, 20),
                 infoWindowAnchor: new GPoint(5, 1)
             })
             
         };
         
         var marker = new GMarker(new GPoint(coordObject.x,coordObject.y), markerOptions);
         map.addOverlay(marker);
         GEvent.addListener(marker, "click", function() {
             marker.openInfoWindowHtml(coordObject.html);
         });    
     }
     
     
     // generate this array from your DB of coordinates and html markup (eg, properties)
     var coords = <?=json_encode($row)?>;
     
     // this will loop though all of them
     var spots = coords.length;
     while(spots--) {
         doMarker(coords[spots]);
     }
     
     
     
}	
</script>

PHP:

as for knowing which is default and which is custom, you need to be a little more inventive here... add a property to the array $row, for example:

"type" => "custom" / "default"

this will return as JSON object coords.type.

then modify the doMarker function before the var marker = new GMarker line, add:

if (coordObject.type == "custom") {
...
}
else {
... produce it as a default look one with your older code.

}

tbh, it makes FAR MORE sense to pass the icon names to the coordObject - that way you can control via PHP what colour marker to place and you can have as many iterations as colours/images you can provide.

 

I do appreciate your help, I really do, but I have to ask, is there an easier way of doing this? You're throwing out all of this information that I don't understand. I have to remind you that your competence in this surpasses mine in every way possible. For starters I don't know how I would create a database with my information in it and that's a problem. Another thing is that I know very little about PHP so this talk of controlling it from there boggles my mind.

Is there any way to resolve my issue without having to use other tools? I would like to keep it within the code I have and make necessary changes without reworking the whole way it works now. If I understood how, I would, but I'm afraid I don't. You're speaking Spanish, French, and Japanese to me.

Thank you again.

 

heh. sorry - to be honest, this sort of code snippet would come handy for me - which is why i am trying to code it in a pattern way (one that can be re-used). I may need it some day...

I assumed since you are coding a properties/rentals site, you'd be adding a lot of addresses which are to be held in a DB. This would make sense for people to look around the map and click on the properties by location to view the details...

to make things simple for you, let's go back a version.

<script type="text/javascript">
if (GBrowserIsCompatible()) {
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GScaleControl());
    map.centerAndZoom(new GPoint(-71.070814, 42.35607), 4);
    
    
    var doMarker = function(coordObject) {
        markerOptions = { 
            icon: new GIcon({
                image: "http://www.bostoncityproperties.com/greenIcon.png",
                shadow: "http://www.bostoncityproperties.com/greenIconShadow.png",
                iconSize: new GSize(25, 36),
                shadowSize: new GSize(44, 40),
                iconAnchor: new GPoint(6, 20),
                infoWindowAnchor: new GPoint(5, 1)
            })
            
        };
        
        var marker = new GMarker(new GPoint(coordObject.x,coordObject.y), (coordObject.icon == "custom") ? markerOptions : {});
        map.addOverlay(marker);
        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(coordObject.html);
        });    
    }
    
    
    var coords = [
        // sample data, regular marks.
        {
            x: -71.06277,
            y: 42.35346,
            html: '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="rit.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Ritz Carlton Boston Common</b><br>1-3 Avery St<br>Boston, MA 02116<br><br><a href=/Ritz_Carlton_Boston.html>More Details</a></td></tr></div>'
        },
        {    
            x: -71.06343,
            y: 42.35448,
            html: '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="tre.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>Tremont on the Common</b><br>151 Tremont Street<br>Boston, MA 02116<br><br><a href=/Tremont_on_the_Common.html>More Details</a></td></tr></div>'
        },
        {    
            x: -71.06369,
            y: 42.35394,
            html: '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="gra.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The Grandview</b><br>165 Tremont Street<br>Boston, MA 02116<br><br><a href=/Grandview_Boston.html>More Details</a></td></tr></div>'
        },
        // sample data, custom marks.
        {
            icon: "custom",
            x: -71.087790,
            y: 42.348258,
            html: '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/360.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>360 Newbury</b><br>360 Newbury Street<br>Boston, MA 02116<br><br><a href=/360_Newbury_Street_Lofts_Boston.html>More Details</a></td></tr></div>'
        },
        {
            icon: "custom",
            x: -71.07409,
            y: 42.347087,
            html: '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="/285.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>285 Columbus Lofts</b><br>285 Columbus Ave<br>Boston, MA 02116<br><br><a href=/285_Columbus_Lofts_Boston.html>More Details</a></td></tr></div>'
        }
    ];
    
    // this will loop though all of them
    var spots = coords.length;
    while(spots--) {
        doMarker(coords[spots]);
    }
}    
</script>

PHP:

just fill in the rest of the data in the format specified, add icon: "custom", to objects that need the green mark.

good luck - i hope you actually learn a little out of this
in action: http://442print.co.uk/maptest.php

 

Thank you so much sir.

You have helped me out incredibly so. I am going to review over this thread in its entirety, many times until I fully grasp the concepts here.

Rep you shall receive!

It worked perfectly.

 

Damn, this worked just great in Firefox, but when I tried it in Internet Explorer....the map did not work at all.

You can visit the link at: CLICK ME

 

Damn, this worked just great in Firefox, but when I tried it in Internet Explorer....the map did not work at all.

You can visit the link at: CLICK ME

 

aftre the LAST element in the coords[] - it goes:

        },
		{
            icon: "custom",
            x: -71.10873,
            y: 42.32754,
            html: '<div id="infowindow" ><table width="400" border="0"><tr><td width="120" height="120" valign="top"><IMG src="http://www.bostoncityproperties.com/images/tn/ame.gif" width=120 height=90 border="1"></td><td width="10">&nbsp;</td><td width="300" valign="top"> <b>The American Brewery Lofts</b><br>251 Heath Street<br>Boston, MA 02116<br><br><a href=http://www.bostoncityproperties.com/The_American_Brewery_Lofts.html>More Details</a></td></tr></div>'
        },
];

Code (markup):

remove the trailing comma after the }

in IE, if you put a comma after the last element, it expects a new one to follow, not for the data structure to finish.

also, your page is a mess... and you use jquery which can remove 90% of the extra hacks u've put i know you're a designer and this is all french to you, but trust me when i say this, learn js/ajax - pays much better

 

Ah, I see. Well that makes sense.

As far as the page being a mess goes, I understand that. I actually didn't create the bulk of the code that's in here. I was just brought in to finish it up so I was working off the foundation they already have.

I KNOW I have to learn some js/ajax. I have heard nothing but wonderful things about it and how powerful it is and oh the things you can do. I'll probably end up picking up a book from the store so I can get started with that. It would be nice to add that to my arsenal.

Thanks!