api v3. a is null - maps don't change

1,161 views
Skip to first unread message

Ciro Marotta

unread,
Jan 3, 2011, 4:15:14 PM1/3/11
to google-map...@googlegroups.com
Hello everyone,
I have two problems with using google maps api.

First problem
I used the above code for testing. changing address, I noticed that the map does not change. remains stationary at the first address that I spent.

Second problem
I have implemented the same code all'iterno a site using firebug but I get as error message is null.

How can I fix it?

<!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>Documento senza titolo</title>
<?PHP
$address = "via vittorio emanuele 20, Napoli it";
?>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="javascript">
var geocoder;
var map;
function initialize()
    {   
        geocoder = new google.maps.Geocoder();   
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {zoom: 11, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }   
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
    }  
function codeAddress()
    { 
        geocoder = new google.maps.Geocoder();   
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }   
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
        var address = "<?=$address?>";  
        geocoder.geocode({ 'address': address},function(results, status)
            {  
                if (status == google.maps.GeocoderStatus.OK)
                    {    
                        map.setCenter(results[0].geometry.location);  
                        var marker = new google.maps.Marker({    
                        map: map,         
                        position: results[0].geometry.location      
                        });  
                    }
                 else
                    {  
                        alert("Geocode was not successful for the following reason: " + status);   
                    }
            });
     } 
</script>

</head>
<body onload="codeAddress()">
<div id="map_canvas" style="width: 620px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="codeAddress()"> 
</div>
</body>
</html>
thanks to all

Marc Ridey

unread,
Jan 3, 2011, 4:21:31 PM1/3/11
to google-map...@googlegroups.com
You should avoid recreating the map on every call to codeAddress().
Try this:

- remove the map creation code from codeAddress (the first 4 lines)
- change onload in <body> to call initialize
- If required, add a call to codeAddress at the end of initialize fuinction

Marc

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Ciro Marotta

unread,
Jan 3, 2011, 5:32:21 PM1/3/11
to google-map...@googlegroups.com
Hello and thanks for the reply. I solved the first problem but not the second. And it comes a new one.

Now I use this code

<!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>Documento senza titolo</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="javascript">
var geocoder;
var map;
function initialize()
    {   
        geocoder = new google.maps.Geocoder();   
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }   
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
        codeAddress();
    }  
function codeAddress()
    {    

        var address = "Corso vittorio emanuele, Napoli it";  
        geocoder.geocode({ 'address': address},function(results, status)
            {  
                if (status == google.maps.GeocoderStatus.OK)
                    {    
                        map.setCenter(results[0].geometry.location);  
                        var marker = new google.maps.Marker({    
                        map: map,         
                        position: results[0].geometry.location      
                        });  
                    }
                 else
                    {  
                        alert("Geocode was not successful for the following reason: " + status);   
                    }
            });
     } 
</script>

</head>
<body onload="initialize()">

<div id="map_canvas" style="width: 320px; height: 480px;"></div>

<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="codeAddress()"> 
</div>
</body>
</html>


Let's start with the new.
I would not go with the map by default. What is being created with the function initialize. I would start with a map that is generated by passing the address as a parameter. so what I create in the function CodeAddress ().

The second problem
I still like error message 'a is null'. I think the problem is because they do not call the initialize function in the body. I call it just before

<div id="map_canvas" style="width: 320px; height: 480px;"></div>

How can I do?

thanks

Susannah (Google Employee)

unread,
Jan 3, 2011, 6:53:45 PM1/3/11
to Google Maps JavaScript API v3
I do not see any errors when loading your code in Firefox 3.6.13.

Please include a link to your site and specify in which browser you
see the error.

Thank you,
Susannah

On Jan 4, 9:32 am, Ciro Marotta <ciro.maro...@gmail.com> wrote:
> Hello and thanks for the reply. I solved the first problem but not the
> second. And it comes a new one.
>
> Now I use this code
>
> <!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>Documento senza titolo</title>
> <link
> href="http://code.google.com/apis/maps/documentation/javascript/examples/st..."

Ciro Marotta

unread,
Jan 4, 2011, 5:10:19 PM1/4/11
to google-map...@googlegroups.com
the code is the same....but i need to call initialize function non on body

example


<!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>Documento senza titolo</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script language="javascript">
initialize()
</script>

<div id="map_canvas" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="codeAddress()"> 
</div>
</body>
</html>


in this case don't work

geoco...@gmail.com

unread,
Jan 4, 2011, 5:16:16 PM1/4/11
to Google Maps JavaScript API v3
On Jan 4, 2:10 pm, Ciro Marotta <ciro.maro...@gmail.com> wrote:
> the code is the same....but i need to call initialize function non on body
>
> example
>
> <!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>Documento senza titolo</title>
> <link
> href="http://code.google.com/apis/maps/documentation/javascript/examples/st..."
Nope. It won't. That code has to run after the DOM is completely
loaded (which is when the body onload event fires), particularly in
IE. You could call it at the end of your page, just before the </
body> tag, and it might work.

-- Larry
Reply all
Reply to author
Forward
0 new messages