Google maps - marker in wrong spot

I have a dynamic map I'm using for my site but the red marker is in the wrong spot.  Is there a way to move the marker and keep the correct address in the code?
livewirewebsolutionsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
Tom BeckCommented:
Are you using a custom icon. Likely you have not positioned it correctly. Let's see the code.
0
 
Dave BaldwinFixer of ProblemsCommented:
That's exactly where Google Maps thinks that is.  Where do you think it should be?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
livewirewebsolutionsAuthor Commented:
Obviously.  But's that's not where it is.  Is there a way to move the marker in the code?
0
 
Dave BaldwinFixer of ProblemsCommented:
Yes, but you need to know the longitude and latitude of the place you want the marker to point to.
0
 
livewirewebsolutionsAuthor Commented:
yes, i can get the long and lat - i posted the correct long and lat in the code and it did nothing
0
 
Dave BaldwinFixer of ProblemsCommented:
Did you put it in both places?  It's in there twice in the link above.
0
 
Dave BaldwinFixer of ProblemsCommented:
Interesting.  I changed the long/lat quite a bit and the marker didn't move.  It only moved when I changed the address part.  That tells me that it is ignoring most of the code after the first address.  Removing 'embed' makes it go to the regular Google Maps page.
0
 
Ray PaseurCommented:
I have a Google Static Map Class in an article here at EE.  Maybe that will offer some clues.  You might try copying it and using it to map the location and set the marker.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_3350-Using-the-Google-Maps-API-in-PHP.html
0
 
livewirewebsolutionsAuthor Commented:
Yeah, it's weird.  Long and lat don't make a difference.

I will try Ray's option above.  I'll keep you posted.
0
 
Ray PaseurCommented:
I tried it with the address only.  Not sure if this is the result you want, but it should be easy to experiment with it.
Please see http://iconoun.com/demo/temp_livewire.php

<?php // demo/temp_livewire.php
error_reporting(E_ALL);

// DEMONSTRATE HOW TO USE THE GOOGLE MAPS API
// FOR A STATIC MAP OF SPECIFIC SIZE
// OPTIONAL CENTERED PUSHPIN
// OPTIONAL OTHER PUSHPIN(S) OR ICONS
// MAN PAGE: http://code.google.com/apis/maps/documentation/staticmaps/

// SEE http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_28385978.html

// DEFINE THE GOOGLE STATIC MAPPING CLASS
class GSM
{
    // THE MAP CENTER GEOCODE, ADDRESS OR LANDMARK
    protected $center;

    // MARKER DATA ARRAY
    protected $markers;
    protected $default_icon;

    // OUR VARIABLES FOR THE MAP DISPLAY
    protected $maptype;
    protected $width;
    protected $height;
    protected $zoom;
    protected $format;

    // OUR VARIABLES FOR THE GOOGLE URL AND IMAGE TAG
    protected $alt;
    protected $title;
    protected $class;
    protected $id;
    protected $usemap;
    protected $sensor;
    protected $url;
    private $img;

    // A CONSTRUCTOR TO SET THE DEFAULT VALUES
    public function __construct()
    {
        // THE URL AND IMG TAG PARAMETERS
        $this->alt    = FALSE;
        $this->class  = FALSE;
        $this->id     = FALSE;
        $this->usemap = FALSE;
        $this->sensor = FALSE;
        $this->title  = TRUE;
        $this->url    = '';
        $this->img    = '';

        // THE CENTER AND ZOOM SCALE OF THE MAP (IF OMITTED, GOOGLE WILL CALCULATE)
        $this->center  = NULL;
        $this->zoom    = NULL;

        // THE CHARACTERISTICS OF THE MAP IMAGE
        $this->maptype = 'hybrid';    // CHOOSE
        $this->maptype = 'terrain';   // AMONG
        $this->maptype = 'satellite'; // THESE
        $this->maptype = 'roadmap';   // OPTIONS
        $this->width   = '640';
        $this->height  = '640';
        $this->format  = 'png';

        // THE DEFAULT ICON
        $this->default_icon = 'http://maps.google.com/mapfiles/ms/micons/question.png';

        // AN ARRAY OF MARKER ARRAYS
        $this->clearMarkers();

    } // END CONSTRUCTOR

    // A METHOD TO CLEAR THE MARKERS
    public function clearMarkers()
    {
        $this->markers = array();
    }

    // A SETTER TO ADD MARKERS TO THE MAP
    public function setMarker($geocode, $color='blue', $label='X')
    {
        // NOTE THAT THIS WILL WORK CORRECTLY MOST OF THE TIME
        $geocode = urlencode(urldecode($geocode));
        $this->markers[]
        = array
        ( 'color'   => $color
        , 'label'   => $label
        , 'geocode' => $geocode
        , 'icon'    => FALSE
        )
        ;
    }

    // A SETTER TO ADD ICONS TO THE MAP - VIEW SOURCE HERE: http://www.visual-case.it/cgi-bin/vc/GMapsIcons.pl
    public function setIcon($geocode, $icon=FALSE)
    {
        // NOTE THAT THIS WILL WORK CORRECTLY MOST OF THE TIME
        $geocode = urlencode(urldecode($geocode));
        if (!$icon) $icon = $this->default_icon;
        $this->markers[]
        = array
        ( 'color'   => FALSE
        , 'label'   => FALSE
        , 'geocode' => $geocode
        , 'icon'    => $icon
        )
        ;
    }

    // A SETTER TO OVERRIDE EACH OF THE DEFAULT VALUES
    public function setCenter($geocode=NULL)
    {
        // NOTE THAT THIS WILL WORK CORRECTLY MOST OF THE TIME
        $geocode = urlencode(urldecode($geocode));
        $this->center = $geocode;
    }
    public function setMaptype($x)
    {
        $this->maptype = $x;
    }
    public function setFormat($x)
    {
        $this->format = $x;
    }
    public function setWidth($x)
    {
        $this->width = $x;
    }
    public function setHeight($x)
    {
        $this->height = $x;
    }
    public function setZoom($x=NULL)
    {
        $this->zoom = $x;
    }
    public function setAlt($x=FALSE)
    {
        $this->alt = $x;
    }
    public function setTitle($x=TRUE)
    {
        $this->title = $x;
    }
    public function setClass($x=FALSE)
    {
        $this->class = $x;
    }
    public function setId($x=FALSE)
    {
        $this->id = $x;
    }
    public function setUsemap($x=FALSE)
    {
        $this->usemap = $x;
    }
    public function setSensor($x=FALSE)
    {
        $this->sensor = $x;
    }

    // A METHOD TO PREPARE AND RETRIEVE THE MAPPING URL
    public function asURL()
    {
        $s = 'false'; // SEE http://code.google.com/apis/maps/documentation/staticmaps/#Sensor
        if ($this->sensor) $s = 'true';

        // IF ICONS OR MARKERS ARE ON THE MAP, 'IMPLODE' THE DATA INTO THE URL
        $marker_string = '';
        foreach ($this->markers as $marker)
        {
            // PROCESS FOR CUSTOM ICONS
            if ($marker['icon'])
            {
                $marker_string
                = $marker_string
                . '&markers='
                . 'icon:'
                . urlencode($marker['icon'])
                . '|'
                . $marker['geocode']
                ;
                continue;
            }
            // PROCESS FOR STANDARD MARKERS
            $marker_string
            = $marker_string
            . '&markers='
            . 'color:'
            . $marker['color']
            . '|'
            . 'label:'
            . $marker['label']
            . '|'
            . $marker['geocode']
            ;
        }

        // SET CENTER AND ZOOM, IF PRESENT
        $c = '';
        if ($this->center) $c = "&center=$this->center";
        $z = '';
        if ($this->zoom)   $z = "&zoom=$this->zoom";

        // MAKE THE URL
        $this->url
        = "http://maps.google.com/maps/api/staticmap?sensor=$s"
        . $c
        . $z
        . "&size=$this->width" . 'x' . "$this->height"
        . "&format=$this->format"
        . "&maptype=$this->maptype"
        . "$marker_string"
        ;
        return $this->url;
    }

    // A METHOD TO PREPARE AND RETRIEVE THE HTML IMAGE TAG
    public function asIMG()
    {
        // GET THE URL
        if (!$this->url) $this->url = $this->asURL();

        // GET THE ALT TEXT
        $a = "$this->maptype" . ' centered ' . "$this->center";
        if ($this->alt !== FALSE) $a = $this->alt;

        // REQUIRED FIELDS
        $this->img = '<img src="' . $this->url . '" alt="' . $a . '"';

        // OPTIONAL FIELDS - PROVIDE A DEFAULT TITLE
        $t = "$this->maptype" . ' centered ' . "$this->center";
        if     ($this->title  === TRUE ) { $this->img .= ' title="' . $t .           '"'; }
        elseif ($this->title !== FALSE)  { $this->img .= ' title="' . $this->title . '"'; }

        // OPTIONAL FIELDS MAY BE OMITTED
        if ($this->class  !== FALSE) { $this->img .= ' class="'  . $this->class  . '"'; }
        if ($this->id     !== FALSE) { $this->img .= ' id="'     . $this->id     . '"'; }
        if ($this->usemap !== FALSE) { $this->img .= ' usemap="' . $this->usemap . '"'; }

        // CLOSE THE IMAGE TAG AND CLEAR THE CONSUMED URL
        $this->img .= ' />';
        $this->url = FALSE;
        return $this->img;
    }

    // A METHOD TO RETRIEVE THE IMAGE DATA (STORING DATA MAY VIOLATE GOOGLE TOS!)
    public function asData()
    {
        // GET THE URL
        if (!$this->url) $this->url = $this->asURL();

        // READ AND RETURN THE URL
        return file_get_contents($this->url);
    }

} // END CLASS



// MAKE A GOOGLE STATIC MAP OBJECT AND TEST IT OUT
$x = new GSM;
$x->setWidth(620);
$x->setHeight(620);
$x->setZoom(12);

// SET A MARKER BY PLACE NAME, CITY, STATE
$x->setMarker("106 - 1030 Coronation Drive, London, ON", 'brown', 'V');

// ECHO THE <img /> TAG INTO OUR HTML TO DRAW THE MAP
echo $x->asIMG();

Open in new window

0
 
livewirewebsolutionsAuthor Commented:
Hi Ray, i keep getting a syntax error when i place the code in the body??  syntax error is no the closing body tag.
0
 
Ray PaseurCommented:
I would need to see the code that is giving you trouble.  The example I posted above is the same code as the link I posted, so there is something else that must be awry.
0
 
livewirewebsolutionsAuthor Commented:
I just opened an html page in Dreamweaver and pasted the code within the body tags.
0
 
Ray PaseurCommented:
I would need to see the code that is giving you trouble.
You can copy and paste it into the code snippet feature here at EE.  Then we can see it.
0
 
livewirewebsolutionsAuthor Commented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<?php // demo/temp_livewire.php
error_reporting(E_ALL);

// DEMONSTRATE HOW TO USE THE GOOGLE MAPS API
// FOR A STATIC MAP OF SPECIFIC SIZE
// OPTIONAL CENTERED PUSHPIN
// OPTIONAL OTHER PUSHPIN(S) OR ICONS
// MAN PAGE: http://code.google.com/apis/maps/documentation/staticmaps/

// SEE http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_28385978.html

// DEFINE THE GOOGLE STATIC MAPPING CLASS
class GSM
{
    // THE MAP CENTER GEOCODE, ADDRESS OR LANDMARK
    protected $center;

    // MARKER DATA ARRAY
    protected $markers;
    protected $default_icon;

    // OUR VARIABLES FOR THE MAP DISPLAY
    protected $maptype;
    protected $width;
    protected $height;
    protected $zoom;
    protected $format;

    // OUR VARIABLES FOR THE GOOGLE URL AND IMAGE TAG
    protected $alt;
    protected $title;
    protected $class;
    protected $id;
    protected $usemap;
    protected $sensor;
    protected $url;
    private $img;

    // A CONSTRUCTOR TO SET THE DEFAULT VALUES
    public function __construct()
    {
        // THE URL AND IMG TAG PARAMETERS
        $this->alt    = FALSE;
        $this->class  = FALSE;
        $this->id     = FALSE;
        $this->usemap = FALSE;
        $this->sensor = FALSE;
        $this->title  = TRUE;
        $this->url    = '';
        $this->img    = '';

        // THE CENTER AND ZOOM SCALE OF THE MAP (IF OMITTED, GOOGLE WILL CALCULATE)
        $this->center  = NULL;
        $this->zoom    = NULL;

        // THE CHARACTERISTICS OF THE MAP IMAGE
        $this->maptype = 'hybrid';    // CHOOSE
        $this->maptype = 'terrain';   // AMONG
        $this->maptype = 'satellite'; // THESE
        $this->maptype = 'roadmap';   // OPTIONS
        $this->width   = '640';
        $this->height  = '640';
        $this->format  = 'png';

        // THE DEFAULT ICON
        $this->default_icon = 'http://maps.google.com/mapfiles/ms/micons/question.png';

        // AN ARRAY OF MARKER ARRAYS
        $this->clearMarkers();

    } // END CONSTRUCTOR

    // A METHOD TO CLEAR THE MARKERS
    public function clearMarkers()
    {
        $this->markers = array();
    }

    // A SETTER TO ADD MARKERS TO THE MAP
    public function setMarker($geocode, $color='blue', $label='X')
    {
        // NOTE THAT THIS WILL WORK CORRECTLY MOST OF THE TIME
        $geocode = urlencode(urldecode($geocode));
        $this->markers[]
        = array
        ( 'color'   => $color
        , 'label'   => $label
        , 'geocode' => $geocode
        , 'icon'    => FALSE
        )
        ;
    }

    // A SETTER TO ADD ICONS TO THE MAP - VIEW SOURCE HERE: http://www.visual-case.it/cgi-bin/vc/GMapsIcons.pl
    public function setIcon($geocode, $icon=FALSE)
    {
        // NOTE THAT THIS WILL WORK CORRECTLY MOST OF THE TIME
        $geocode = urlencode(urldecode($geocode));
        if (!$icon) $icon = $this->default_icon;
        $this->markers[]
        = array
        ( 'color'   => FALSE
        , 'label'   => FALSE
        , 'geocode' => $geocode
        , 'icon'    => $icon
        )
        ;
    }

    // A SETTER TO OVERRIDE EACH OF THE DEFAULT VALUES
    public function setCenter($geocode=NULL)
    {
        // NOTE THAT THIS WILL WORK CORRECTLY MOST OF THE TIME
        $geocode = urlencode(urldecode($geocode));
        $this->center = $geocode;
    }
    public function setMaptype($x)
    {
        $this->maptype = $x;
    }
    public function setFormat($x)
    {
        $this->format = $x;
    }
    public function setWidth($x)
    {
        $this->width = $x;
    }
    public function setHeight($x)
    {
        $this->height = $x;
    }
    public function setZoom($x=NULL)
    {
        $this->zoom = $x;
    }
    public function setAlt($x=FALSE)
    {
        $this->alt = $x;
    }
    public function setTitle($x=TRUE)
    {
        $this->title = $x;
    }
    public function setClass($x=FALSE)
    {
        $this->class = $x;
    }
    public function setId($x=FALSE)
    {
        $this->id = $x;
    }
    public function setUsemap($x=FALSE)
    {
        $this->usemap = $x;
    }
    public function setSensor($x=FALSE)
    {
        $this->sensor = $x;
    }

    // A METHOD TO PREPARE AND RETRIEVE THE MAPPING URL
    public function asURL()
    {
        $s = 'false'; // SEE http://code.google.com/apis/maps/documentation/staticmaps/#Sensor
        if ($this->sensor) $s = 'true';

        // IF ICONS OR MARKERS ARE ON THE MAP, 'IMPLODE' THE DATA INTO THE URL
        $marker_string = '';
        foreach ($this->markers as $marker)
        {
            // PROCESS FOR CUSTOM ICONS
            if ($marker['icon'])
            {
                $marker_string
                = $marker_string
                . '&markers='
                . 'icon:'
                . urlencode($marker['icon'])
                . '|'
                . $marker['geocode']
                ;
                continue;
            }
            // PROCESS FOR STANDARD MARKERS
            $marker_string
            = $marker_string
            . '&markers='
            . 'color:'
            . $marker['color']
            . '|'
            . 'label:'
            . $marker['label']
            . '|'
            . $marker['geocode']
            ;
        }

        // SET CENTER AND ZOOM, IF PRESENT
        $c = '';
        if ($this->center) $c = "&center=$this->center";
        $z = '';
        if ($this->zoom)   $z = "&zoom=$this->zoom";

        // MAKE THE URL
        $this->url
        = "http://maps.google.com/maps/api/staticmap?sensor=$s"
        . $c
        . $z
        . "&size=$this->width" . 'x' . "$this->height"
        . "&format=$this->format"
        . "&maptype=$this->maptype"
        . "$marker_string"
        ;
        return $this->url;
    }

    // A METHOD TO PREPARE AND RETRIEVE THE HTML IMAGE TAG
    public function asIMG()
    {
        // GET THE URL
        if (!$this->url) $this->url = $this->asURL();

        // GET THE ALT TEXT
        $a = "$this->maptype" . ' centered ' . "$this->center";
        if ($this->alt !== FALSE) $a = $this->alt;

        // REQUIRED FIELDS
        $this->img = '<img src="' . $this->url . '" alt="' . $a . '"';

        // OPTIONAL FIELDS - PROVIDE A DEFAULT TITLE
        $t = "$this->maptype" . ' centered ' . "$this->center";
        if     ($this->title  === TRUE ) { $this->img .= ' title="' . $t .           '"'; }
        elseif ($this->title !== FALSE)  { $this->img .= ' title="' . $this->title . '"'; }

        // OPTIONAL FIELDS MAY BE OMITTED
        if ($this->class  !== FALSE) { $this->img .= ' class="'  . $this->class  . '"'; }
        if ($this->id     !== FALSE) { $this->img .= ' id="'     . $this->id     . '"'; }
        if ($this->usemap !== FALSE) { $this->img .= ' usemap="' . $this->usemap . '"'; }

        // CLOSE THE IMAGE TAG AND CLEAR THE CONSUMED URL
        $this->img .= ' />';
        $this->url = FALSE;
        return $this->img;
    }

    // A METHOD TO RETRIEVE THE IMAGE DATA (STORING DATA MAY VIOLATE GOOGLE TOS!)
    public function asData()
    {
        // GET THE URL
        if (!$this->url) $this->url = $this->asURL();

        // READ AND RETURN THE URL
        return file_get_contents($this->url);
    }

} // END CLASS



// MAKE A GOOGLE STATIC MAP OBJECT AND TEST IT OUT
$x = new GSM;
$x->setWidth(620);
$x->setHeight(620);
$x->setZoom(12);

// SET A MARKER BY PLACE NAME, CITY, STATE
$x->setMarker("106 - 1030 Coronation Drive, London, ON", 'brown', 'V');

// ECHO THE <img /> TAG INTO OUR HTML TO DRAW THE MAP
echo $x->asIMG();
</body>
</html>

Open in new window

0
 
Ray PaseurCommented:
Thanks.  Look down near the end and you'll find this:
// ECHO THE <img /> TAG INTO OUR HTML TO DRAW THE MAP
echo $x->asIMG();
</body>
</html>

Open in new window

That needs to be changed to close out PHP and drop into HTML before the HTML statements can be processed.  Otherwise, the PHP parser will bark, as you have seen.  Try this change:
// ECHO THE <img /> TAG INTO OUR HTML TO DRAW THE MAP
echo $x->asIMG();

// END OF PHP
?>
</body>
</html>

Open in new window

0
 
livewirewebsolutionsAuthor Commented:
ok.  it's working perfectly - see here - http://162.211.82.64/~ledgers/map.php

But I need the marker to appear a half inch above in that little court area.  Anyway to do this?
0
 
Ray PaseurCommented:
Perhaps, but you will need to know the latitude and longitude of the location that is to have the marker.  If that can be determined from a place name, you've got an easy solution.  If you need to geocode it yourself, you have a bigger task.  Perhaps you can do this with a Garmin or similar GPS device.  Or you can try experimenting with Google interactive maps, moving the pointer and looking at the link that Google generates.
0
 
livewirewebsolutionsAuthor Commented:
i will give it a try. thx.
0
 
livewirewebsolutionsAuthor Commented:
Hi Ray,

Where do I set the long and lat in your code?
0
 
livewirewebsolutionsAuthor Commented:
I think the coordinates I want are 42.9975688,-81.32815
0
 
Ray PaseurCommented:
Please see http://iconoun.com/demo/temp_livewire.php

You set markers by address or geocode with the setMarker() method.  Here are the moving parts, around line 260 of the original code snippet:

// MAKE A GOOGLE STATIC MAP OBJECT AND TEST IT OUT
$x = new GSM;
$x->setWidth(620);
$x->setHeight(620);
$x->setZoom(16);

// SET A MARKER BY PLACE NAME, CITY, STATE
$x->setMarker("106 - 1030 Coronation Drive, London, ON", 'brown', 'V');

// SET A MARKER BY GEOCODE (LAT,LON)
$x->setMarker("42.9975688,-81.32815");

// ECHO THE <img /> TAG INTO OUR HTML TO DRAW THE MAP
echo $x->asIMG();

Open in new window

0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
livewirewebsolutionsAuthor Commented:
Yeah.  Check it out - http://162.211.82.64/~ledgers/map.php

It would be nice if it worked with the live map.  If you find out how to have the long lats override the address on the live maps let me know.  Thanks Ray.
0
 
Ray PaseurCommented:
if it worked with the live map
What is a "live map?"  You might want to post a new question if you still are not sure about how the Google Maps interface works.  Or maybe this article can help:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_3350-Using-the-Google-Maps-API-in-PHP.html
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.