Google map v2 to v3 code

Question

I am working on a migration project from google maps V2 to V3 and wrote the bellow code but getting error and unable to solve the problem.

Am i using wrong method of google maps?

What is wrong in this code?

<div id="map_canvas" style="width: 300px; height: 225px; font-family:arial; font-size:10px;"></div>
<?php
$map = getMap();
echo $map = str_replace('$_ADDRESS', 'MYADDRESS', $map );


function getMap()
{
    $mapKey = 'MYKEY';
    $_script = '
        <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key='. $mapKey .'&sensor=false"></script>
        <script type="text/javascript">
            //<![CDATA[
            var map = null;
            var geocoder = null;

            // call initialize function
            initialize( $_ADDRESS );

            // initialize map

            function initialize() 
            {
                var map = new google.maps.Map(document.getElementById("map_canvas"), {
                center: new google.maps.LatLng(37.4419, -122.1419),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                });             
                geocoder = new google.maps.Geocoder();

                // call show Address
                showAddress( address );
            }

            // show address
            function showAddress(address)
            {
                if (geocoder)
                {
                    geocoder.getPosition( address, function(point)
                    {
                        if (!point)
                        {
                            alert(address + " not found");
                        }
                        else
                        {
                            map.setCenter(point, 13);
                            var marker = new google.maps.Marker(point);
                            map.addOverlay(marker);
                            //marker.openInfoWindowHtml(address);
                        }
                    });
                }
            }
            //]]>
    </script>';
    return $_script;
}
?>

Any idesa? Thanks

Answer 1

I have split these answers as the first deals with the fundamentals of the javascript, this then deals with using the Google Maps API.

As I've never used the maps API, I can't comment on V2, but looking at how you do things in V3, I think this does what you're looking for...

<div id="map_canvas" style="width: 300px; height: 225px; font-family:arial; font-size:10px;"></div>
<?php
$map = getMap();
echo $map = str_replace('$_ADDRESS', 'MYADDRESS', $map );


function getMap()
{
    $mapKey = 'MYKEY';
    $_script = '
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
        <script type="text/javascript">
            //<![CDATA[
            var map = null;
            var geocoder = null;

            // call initialize function
            initialize( "$_ADDRESS" );

            // initialize map
            function initialize( address ) 
            {
                map = new google.maps.Map(document.getElementById("map_canvas"), {
                center: new google.maps.LatLng(37.4419, -122.1419),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                });             
                geocoder = new google.maps.Geocoder();

                // call show Address
                showAddress( address );
            }

            // show address
            function showAddress(address)
            {
                if (geocoder)
                {
                    geocoder.geocode( { "address": address }, function( results, status )
                    {
                        if ( status == google.maps.GeocoderStatus.OK )
                        {
                            position = results[0].geometry.location;
                            map.setCenter(position, 13);
                            var marker = new google.maps.Marker({ map: map, position: position });
                        }
                        else
                        {
                            alert(address + " not found");
                        }
                    });
                }
            }
            //]]>
    </script>';
    return $_script;
}
?>

Having said that, I'd question the str_replace straight into the javascript - can you trust the source of that data? If not, then you should look up how to sanitise that string before you put it into your javascript or you may allow people to inject code into your site.

Answer 2

Looking at the fundamental javascript issues you have...

Try adding quotes around the string that you're replacing into the javascript

echo $map = str_replace('$_ADDRESS', 'MYADDRESS', $map );

Becomes:

echo $map = str_replace('$_ADDRESS', "'MYADDRESS'", $map );

That way the string that contains the address in javascript is properly quoted.

Also, ensure that you can receive the address in your initialize function:

function initialize() 

Becomes:

function initialize( address ) 

Finally, do not redeclare "map" when you assign it a value in "initialize", otherwise you are referencing a different variable that only exists in that function:

var map = new google.maps.Map(document.getElementById("map_canvas"), {

Becomes:

map = new google.maps.Map(document.getElementById("map_canvas"), {