Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 32
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Google Map API zoom / center around markers ?

    I am no javascript coder so apologies for what may be a simple issue,

    I have a php page that pulls MySQL marker locations

    I have tried using examples for bounds etc but the map isn't centered or zoomed, it instead seems to center over the Pacific and minimum zoom level (For the url below it should be centered over the Devon region of the UK and zoomed in)

    the page where you can see the end result is here:
    http://www.peugeotcentral.co.uk/modu...tches&Region=1

    I did have some issues in my code whereby I was using deprecated function of GPoint for passing locations but one of the group mods kindly pointed this out and this was replaced with GLatLng but the fault is still there

    any help much appreciated, I do have the source code for the php if required

  2. #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 Posts
    Ummm...that URL says it is restricted to admins only.

    Anyway, what does your setCenter( ) call look like??

    That's surely where the bug is.
    Be yourself. No one else is as qualified.

  3. #3
    New Coder
    Join Date
    Nov 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts
    whoops url should be accessible now

    below is the code, I hadn't pasted it at the beginning as some forums hate you posting code snippets

    PHP Code:
        echo "<table border=\"0\" width=\"600\" height=\"600\" id=\"table1\" align=\"center\">
                <tr>
                    <td align=\"center\">

                         <script src=\"http://maps.google.com/maps?file=api&amp;v=2&amp;key=
    $apikey\"  type=\"text/javascript\"></script>

                        <div id=\"map\" style=\"width: 600; height: 600; color:black\"></div ><br />

                        <script type=\"text/javascript\">
                        //<![CDATA[

                        var icon = new GIcon();
                        icon.image = \"modules/DealerDatabase/icons/peugeot.png\";
                        icon.iconSize = new GSize(32, 32);
                        icon.iconAnchor = new GPoint(9, 20);
                        icon.infoWindowAnchor = new GPoint(9, 2);
                        icon.infoShadowAnchor = new GPoint(18, 25);
                        var bounds = new GLatLngBounds();

                        function createMarker(point,html,style)
                        {
                            // FF 1.5 fix
                            html = '<div align=\"left\" style=\"white-space:nowrap;\">' + html + '</div>';
                            icon.image = 'modules/
    $module_name/icons/' + style + '.png';
                            var marker = new GMarker(point, icon);
                            GEvent.addListener(marker, \"click\", function() {marker.openInfoWindowHtml(html);});
                            return marker;
                  }
                  
                        function loadMap()
                        {
                            var map = new GMap2(document.getElementById(\"map\"));
                            map.setCenter(new GLatLng(0,0),0);
                            map.setZoom(map.getBoundsZoomLevel(bounds));
                  map.setCenter(bounds.getCenter());
                map.addControl(new GLargeMapControl());
                map.addControl(new GMapTypeControl())
                map.addControl(new GScaleControl());
                map.addControl(new GOverviewMapControl());

            // Hides the info windows when the map is clicked
            GEvent.addListener(map, \"click\", function(marker, point){
            if (!marker) {
                map.closeInfoWindow();
            }
            });

                            // This is where we add the markers to the map
                            "
    ;

                            if ( 
    $row $db->sql_fetchrow($resultmap) )
                            {
                                do
                                {
                                    if ( 
    $row['XCoord'] == "")
                                    {
                                        
    // No location
                                    
    }
                                    else
                                    {
                                        
    $DealerName $row['DealerName'];
                                        
    $dealerid $row['dealerid'];
                                        
    $PhotoLink1 $row['ImageUrl'];
                                        if(
    $PhotoLink1!='') {
                                            
    $userpic "http://www.peugeotcentral.co.uk/modules/$module_name/images/dealers/" $row['ImageUrl'];
                                        } else {
                                            
    $userpic='';
                                        }
                                        
    $Town $row['Town'];
                                        
    $Address1 $row['Address1'];
                                        
    $PostCode $row['PostCode'] . " " $row['Postcode2'];
                                        
    $TelephoneNumber $row['TelephoneNumber'];
                                        
    $Details "http://www.peugeotcentral.co.uk/modules.php?name=$module_name&op=display_results&dealerid=$dealerid";

                                        
    $XCoord $row['XCoord'];
                                        
    $YCoord $row['YCoord'];

                                        if (!
    preg_match("/[.]/"$XCoord)) {
                                    
    $XCoord stripslashes($row['XCoord']);
                                    list(
    $degrees,$minutes,$seconds) = explode(" ",$XCoord);
                                    
    $minutesconverted=$minutes*60;
                                    
    $totalseconds=$minutesconverted+$seconds;
                                    
    $totalsecondsconverted=$totalseconds/3600;
                                    
    $totalsecondsrounded number_format($totalsecondsconverted6"."",");
                                    
    $degrees += 0;
                                    list(
    $rubbish,$totalsecondsrounded) = explode(".",$totalsecondsrounded);
                                    
    $DecimalXCoord="$degrees"." "$totalsecondsrounded";
                                } else {
                                    
    $DecimalXCoord $XCoord;
                                }

                                if (!
    preg_match("/[.]/"$YCoord)) {
                                    
    $YCoord stripslashes($row['YCoord']);
                                    list(
    $degrees,$minutes,$seconds) = explode(" ",$YCoord);
                                    
    $minutesconverted=$minutes*60;
                                    
    $totalseconds=$minutesconverted+$seconds;
                                    
    $totalsecondsconverted=$totalseconds/3600;
                                    
    $totalsecondsrounded number_format($totalsecondsconverted6"."",");
                                    
    $degrees += 0;
                                    list(
    $rubbish,$totalsecondsrounded) = explode(".",$totalsecondsrounded);
                                    
    $DecimalYCoord="$degrees"." "$totalsecondsrounded";
                                } else {
                                    
    $DecimalYCoord $YCoord;
                                }

                                        
    $userlat $DecimalXCoord;
                                        
    $userlong $DecimalYCoord;


                                        
    // Remove bad chars from the name and location
                                        
    $DealerName htmlspecialchars($DealerNameENT_QUOTES);
                                        
    $Town htmlspecialchars($TownENT_QUOTES);
                                        
    $PostCode htmlspecialchars($PostCodeENT_QUOTES);
                                        
    $Address1 htmlspecialchars($Address1ENT_QUOTES);
                                        
    $TelephoneNumber htmlspecialchars($TelephoneNumberENT_QUOTES);

                      
    // Setup the marker colour
                      
    $iconstyle="peugeot";

                                        if(
    is_admin($admin)) {
                                            
    $modlink "<a href=\"modules.php?name=$module_name&op=modify&dealerid=$dealerid\"><img src=modules/DealerDatabase/images/book_edit.gif align=\"absmiddle\" border=0 title=\"Edit $DealerName\"></a>";
                                        } else {
                                            
    $modlink='';
                                        }

                                        if(
    $userpic!='') {
                                            
    $markertext "<table border=\"0\" width=\"300\" cellspacing=\"0\" cellpadding=\"0\" id=\"mapinfo\"><tr><td width=\"80\" valign=\"top\"><img width=\"80\" border=\"0\" src=\"$userpic\" align=\"left\"></td>";
                                            
    $markertext.= "<b>$DealerName</b><br>";
                                            
    $markertext.= "<b>$Address1</b><br>";
                                            
    $markertext.= "<b>$Town</b><br>";
                                            
    $markertext.= "<b>$PostCode</b><br>";
                                            
    $markertext.= "<b>$TelephoneNumber</b><br>";
                                            
    $markertext.= "Full Details: <b><a target=blank.html href=$Details>Click HERE</a><br>";
                                            
    $markertext.= "$modlink&nbsp;</td></tr></table>";
                                        } else {
                                            
    $markertext "<table border=\"0\" width=\"300\" cellspacing=\"0\" cellpadding=\"0\" id=\"mapinfo\"><tr><td><b>$DealerName</b><br/><b>$Address1</b><br/><b>$Town</b><br/><b>$PostCode</b><br/><b>$TelephoneNumber</b><br><br>Full Details: <b><a href=$Details>Click HERE</a><br>$modlink&nbsp;</td></tr></table>";
                                        }

    //                                    echo "var point = new GPoint($userlong, $userlat);";
                                        
    echo "var point = new GLatLng($userlat$userlong);";
                                        echo 
    "var marker = createMarker(point, '$markertext', '$iconstyle' , 'tooltip');";
                                        echo 
    "map.addOverlay(marker);
                                        bounds.extend(point);
                                        "
    ;

                                        
                                    }
                                }
                                
                                while ( 
    $row $db->sql_fetchrow($resultmap) );
                            }

                            echo 
    "
                        }

                        // arrange for our onload handler to 'listen' for onload events
                        if (window.attachEvent)
                        {
                            window.attachEvent(\"onload\", function()
                            {
                                loadMap();    // Internet Explorer
                            }
                            );
                        }
                        else
                        {
                            window.addEventListener(\"load\", function()
                            {
                                loadMap(); // Firefox and standard browsers
                            }, false);
                        }
                        //]]&gt;
                        </script>
                    </td>
                </tr>
            </table>
    "


  4. #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 Posts
    You are doing it to yourself!

    The only place you set the center and zoom level is this code:
    Code:
    function loadMap()
    {
    	var map = new GMap2(document.getElementById("map"));
    	map.setCenter(new GLatLng(0,0),0);
    	map.setZoom(map.getBoundsZoomLevel(bounds));
          	map.setCenter(bounds.getCenter());
    ...
    But that is *BEFORE* you add all your markers and *BEFORE* you do all the calls to
    Code:
          bounds.extend(point);
    So at that point, the bounds are defined as "the entire world"!!!!

    There's really no reason to do this:
    Code:
    	map.setCenter(new GLatLng(0,0),0);
    And you need to move these two lines to *AFTER* the addition of the last marker/point:
    Code:
    	map.setZoom(map.getBoundsZoomLevel(bounds));
          	map.setCenter(bounds.getCenter());
    Be yourself. No one else is as qualified.

  5. Users who have thanked Old Pedant for this post:

    fuzioneer (Nov 1st, 2010)

  6. #5
    New Coder
    Join Date
    Nov 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts
    ok thx for the pointers, I see what you are getting at even to my bad javascript coders brain

    I have amended the code to what i "think" you mean, and now the map appears to be in the right location but only 1 marker is being generated and the map overlay itself is omitted

    code changed as follows:-

    PHP Code:
                        <div id=\"map\" style=\"width: 600; height: 600; color:black\"></div ><br />

                        <script type=\"text/javascript\">
                        //<![CDATA[

                        var icon = new GIcon();
                        icon.image = \"modules/DealerDatabase/icons/peugeot.png\";
                        icon.iconSize = new GSize(32, 32);
                        icon.iconAnchor = new GPoint(9, 20);
                        icon.infoWindowAnchor = new GPoint(9, 2);
                        icon.infoShadowAnchor = new GPoint(18, 25);
                        var bounds = new GLatLngBounds();

                        function createMarker(point,html,style)
                        {
                            // FF 1.5 fix
                            html = '<div align=\"left\" style=\"white-space:nowrap;\">' + html + '</div>';
                            icon.image = 'modules/
    $module_name/icons/' + style + '.png';
                            var marker = new GMarker(point, icon);
                            GEvent.addListener(marker, \"click\", function() {marker.openInfoWindowHtml(html);});
                            return marker;
                  }
                  
                        function loadMap()
                        {
                            var map = new GMap2(document.getElementById(\"map\"));
                map.addControl(new GLargeMapControl());
                map.addControl(new GMapTypeControl())
                map.addControl(new GScaleControl());
                map.addControl(new GOverviewMapControl());

            // Hides the info windows when the map is clicked
            GEvent.addListener(map, \"click\", function(marker, point){
            if (!marker) {
                map.closeInfoWindow();
            }
            });

                            // This is where we add the markers to the map
                            "
    ;

                            if ( 
    $row $db->sql_fetchrow($resultmap) )
                            {
                                do
                                {
                                    if ( 
    $row['XCoord'] == "")
                                    {
                                        
    // No location
                                    
    }
                                    else
                                    {
                                        
    $DealerName $row['DealerName'];
                                        
    $dealerid $row['dealerid'];
                                        
    $PhotoLink1 $row['ImageUrl'];
                                        if(
    $PhotoLink1!='') {
                                            
    $userpic "http://www.peugeotcentral.co.uk/modules/$module_name/images/dealers/" $row['ImageUrl'];
                                        } else {
                                            
    $userpic='';
                                        }
                                        
    $Town $row['Town'];
                                        
    $Address1 $row['Address1'];
                                        
    $PostCode $row['PostCode'] . " " $row['Postcode2'];
                                        
    $TelephoneNumber $row['TelephoneNumber'];
                                        
    $Details "http://www.peugeotcentral.co.uk/modules.php?name=$module_name&op=display_results&dealerid=$dealerid";

                                        
    $XCoord $row['XCoord'];
                                        
    $YCoord $row['YCoord'];

                                        if (!
    preg_match("/[.]/"$XCoord)) {
                                    
    $XCoord stripslashes($row['XCoord']);
                                    list(
    $degrees,$minutes,$seconds) = explode(" ",$XCoord);
                                    
    $minutesconverted=$minutes*60;
                                    
    $totalseconds=$minutesconverted+$seconds;
                                    
    $totalsecondsconverted=$totalseconds/3600;
                                    
    $totalsecondsrounded number_format($totalsecondsconverted6"."",");
                                    
    $degrees += 0;
                                    list(
    $rubbish,$totalsecondsrounded) = explode(".",$totalsecondsrounded);
                                    
    $DecimalXCoord="$degrees"." "$totalsecondsrounded";
                                } else {
                                    
    $DecimalXCoord $XCoord;
                                }

                                if (!
    preg_match("/[.]/"$YCoord)) {
                                    
    $YCoord stripslashes($row['YCoord']);
                                    list(
    $degrees,$minutes,$seconds) = explode(" ",$YCoord);
                                    
    $minutesconverted=$minutes*60;
                                    
    $totalseconds=$minutesconverted+$seconds;
                                    
    $totalsecondsconverted=$totalseconds/3600;
                                    
    $totalsecondsrounded number_format($totalsecondsconverted6"."",");
                                    
    $degrees += 0;
                                    list(
    $rubbish,$totalsecondsrounded) = explode(".",$totalsecondsrounded);
                                    
    $DecimalYCoord="$degrees"." "$totalsecondsrounded";
                                } else {
                                    
    $DecimalYCoord $YCoord;
                                }

                                        
    $userlat $DecimalXCoord;
                                        
    $userlong $DecimalYCoord;


                                        
    // Remove bad chars from the name and location
                                        
    $DealerName htmlspecialchars($DealerNameENT_QUOTES);
                                        
    $Town htmlspecialchars($TownENT_QUOTES);
                                        
    $PostCode htmlspecialchars($PostCodeENT_QUOTES);
                                        
    $Address1 htmlspecialchars($Address1ENT_QUOTES);
                                        
    $TelephoneNumber htmlspecialchars($TelephoneNumberENT_QUOTES);

                      
    // Setup the marker colour
                      
    $iconstyle="peugeot";

                                        if(
    is_admin($admin)) {
                                            
    $modlink "<a href=\"modules.php?name=$module_name&op=modify&dealerid=$dealerid\"><img src=modules/DealerDatabase/images/book_edit.gif align=\"absmiddle\" border=0 title=\"Edit $DealerName\"></a>";
                                        } else {
                                            
    $modlink='';
                                        }

                                        if(
    $userpic!='') {
                                            
    $markertext "<table border=\"0\" width=\"300\" cellspacing=\"0\" cellpadding=\"0\" id=\"mapinfo\"><tr><td width=\"80\" valign=\"top\"><img width=\"80\" border=\"0\" src=\"$userpic\" align=\"left\"></td>";
                                            
    $markertext.= "<b>$DealerName</b><br>";
                                            
    $markertext.= "<b>$Address1</b><br>";
                                            
    $markertext.= "<b>$Town</b><br>";
                                            
    $markertext.= "<b>$PostCode</b><br>";
                                            
    $markertext.= "<b>$TelephoneNumber</b><br>";
                                            
    $markertext.= "Full Details: <b><a target=blank.html href=$Details>Click HERE</a><br>";
                                            
    $markertext.= "$modlink&nbsp;</td></tr></table>";
                                        } else {
                                            
    $markertext "<table border=\"0\" width=\"300\" cellspacing=\"0\" cellpadding=\"0\" id=\"mapinfo\"><tr><td><b>$DealerName</b><br/><b>$Address1</b><br/><b>$Town</b><br/><b>$PostCode</b><br/><b>$TelephoneNumber</b><br><br>Full Details: <b><a href=$Details>Click HERE</a><br>$modlink&nbsp;</td></tr></table>";
                                        }

                                        echo 
    "var point = new GLatLng($userlat$userlong);";
                                        echo 
    "var marker = createMarker(point, '$markertext', '$iconstyle' , 'tooltip');";
                                        echo 
    "map.addOverlay(marker);
                                        bounds.extend(point);
                                        "
    ;

                                        
                                    }
                                }
                                
                                while ( 
    $row $db->sql_fetchrow($resultmap) );
                            }
                                echo 
    "map.setZoom(map.getBoundsZoomLevel(bounds));";
                          echo 
    "map.setCenter(bounds.getCenter());";
                            echo 
    "
                        }

                        // arrange for our onload handler to 'listen' for onload events
                        if (window.attachEvent)
                        {
                            window.attachEvent(\"onload\", function()
                            {
                                loadMap();    // Internet Explorer
                            }
                            );
                        }
                        else
                        {
                            window.addEventListener(\"load\", function()
                            {
                                loadMap(); // Firefox and standard browsers
                            }, false);
                        }
                        //]]&gt;
                        </script>
                    </td>
                </tr>
            </table>
    "


  7. #6
    New Coder
    Join Date
    Nov 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts
    if i view the java error console in IE it shows the following error also:

    Code:
    Webpage error details
    
    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.6; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3)
    Timestamp: Mon, 1 Nov 2010 21:10:27 UTC
    
    
    Message: 'null' is null or not an object
    Line: 608
    Char: 83
    Code: 0
    URI: http://maps.gstatic.com/intl/en_ALL/mapfiles/285c/maps2.api/main.js

  8. #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 Posts
    I don't see it. If you use Firebug, it points out that "a is null" when the "fromLatLngToPixel()" function is invoked. That's here in the Google map code:
    Code:
    Of.prototype.fromLatLngToPixel=function(a,b){ ....
    So pretty clearly it thinks you are passing a null latitude to some function or other, but I don't see it off hand.

    Tell you what...to find out if it's a bug in the bounds, how about *TEMPORARILY* changing those two lines from
    Code:
    map.setZoom(map.getBoundsZoomLevel(bounds));
    map.setCenter(bounds.getCenter());
    To something like
    Code:
    map.setCenter( new GLatLng(51,-3), 8 );
    and see if the map at least comes up and is roughly centered.
    Be yourself. No one else is as qualified.

  9. #8
    New Coder
    Join Date
    Nov 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts
    commented out the two lines and inserted the other line and yep all markers come up and its roughly in the right area / zoom now

    I double checked the database and all matching markers do have lat and long co-ords ?

  10. #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 Posts
    So it's something you are doing wrong with the bounds variable/object.

    Time to check the google API docs.
    Be yourself. No one else is as qualified.

  11. #10
    New Coder
    Join Date
    Nov 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts
    i have put the code back in now we know the markers aren't at fault

  12. #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 Posts
    Okay, if you look here:
    http://code.google.com/apis/maps/doc...#GLatLngBounds
    you will see that the *ONLY* constructor recognized is one that requires a pair of GLatLng arguments.

    You are invoking it with no arguments at all:
    Code:
    var bounds = new GLatLngBounds();
    I dunno if that is the problem or not.

    I have a hacky suggestion for a fix if that is the problem.

    First, change the above line to simply
    Code:
    var bounds = null;
    And then change your loop code to this:
    Code:
        echo "var point = new GLatLng($userlat, $userlong);\n";
        echo "var marker = createMarker(point, '$markertext', '$iconstyle' , 'tooltip');\n";
        echo "map.addOverlay(marker);\n"
        echo "if ( bounds == null ) { bounds=new GLatLngBounds(point,point); } else { bounds.extend(point); }\n";
    See? When the first point is created, the bounds are initialized to include only that one point. After that, they get extended.
    Be yourself. No one else is as qualified.

  13. #12
    New Coder
    Join Date
    Nov 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts
    made those changes but still the same I'm afraid, i.e. one marker showing

  14. #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 Posts
    Man, just something about the GLatLngBounds class that we don't understand.

    I'll try to look at it more later. But can't right now.
    Be yourself. No one else is as qualified.

  15. #14
    New Coder
    Join Date
    Nov 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts
    np thanks for the help, will experiment a bit more my end

  16. #15
    New Coder
    Join Date
    Nov 2010
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts
    does this sound anything similar to my issue ?
    http://groups.google.vu/group/Google...6425c731095f07


 
Page 1 of 3 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •