Google Map API v2 to API v3

Discussion in 'Coding Help' started by ziycon, Dec 30, 2011.

Tags:
  1. ziycon

    ziycon New Member

    I have some code written to work with v2 of the maps API and I'm trying to write it to work with the v3 API but coming across a few stumbling blocks, I can add markers on a click event but I only ever want one marker on the map so if a second click on the map occurs it will remove the previous marker and a new marker at the location of the second click and so on, so there will only ever be one marker.

    Any help is greatly appreciated.

    v2 API code:
    Code:
    <script type="text/javascript">
        //<=!=[=C=D=A=T=A=[
        function createMarker(point, name)
        {
            var marker = new GMarker(point, {title:name});
            return marker;
        }
        
        function mapclick(ov,pt)
        {
            if (marker) map.removeOverlay(marker);
            if (pt) { marker = createMarker(pt,pt.toUrlValue());
                    map.addOverlay(marker);
                    }
            var matchll = /\(([-.\d]*), ([-.\d]*)/.exec(pt);
            if (matchll)
            {
                var lat = parseFloat( matchll[1] );
                var lon = parseFloat( matchll[2] );
                lat = lat.toFixed(6);
                lon = lon.toFixed(6);
            }
            document.getElementById("lat").value = lat;
            if(document.getElementById("lat").value == "undefined")
            {
                document.getElementById("lat").value = "";
            }
            document.getElementById("lon").value = lon;
            if(document.getElementById("lon").value == "undefined")
            {
                document.getElementById("lon").value = "";
            }
        }
        
        if (GBrowserIsCompatible()) 
        {
            var map=new GMap2(document.getElementById("map"));
            map.setCenter(new GLatLng(53.558584,-7.987061), 6);
            map.addControl(new GLargeMapControl());
            var marker = null;
            GEvent.addListener(map,\'click\',function(overlay,point){mapclick(overlay,point)});
        }
        //]=]=>
    </script>
    v3 API code(so far):
    Code:
    <script type="text/javascript">
        //<=!=[=C=D=A=T=A=[
        function initialize() {
            var latlng = new google.maps.LatLng(53.558584,-7.987061);
            var myOptions = {
                zoom: 6,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    
            function addMarker(location) {
                marker = new google.maps.Marker({
                    position: location,
                    map: map
                });
    
                var matchll = /\(([-.\d]*), ([-.\d]*)/.exec(location);
                if (matchll)
                {
                    var lat = parseFloat( matchll[1] );
                    var lon = parseFloat( matchll[2] );
                    lat = lat.toFixed(6);
                    lon = lon.toFixed(6);
                }
    
                document.getElementById("lat").value = lat;
                if(document.getElementById("lat").value == "undefined")
                {
                    document.getElementById("lat").value = "";
                }
                document.getElementById("lon").value = lon;
                if(document.getElementById("lon").value == "undefined")
                {
                    document.getElementById("lon").value = "";
                }
            }
    
            google.maps.event.addListener(map, 'click', function(event) {
                addMarker(event.latLng);
            });
    
        }
        //]=]=>
    </script>
     
  2. ziycon

    ziycon New Member

    Figured it out, here it is if anyone needs if for anything.
    Code:
    <script type=\"text/javascript\">
        //<![CDATA[
        function initialize() {
            var latlng = new google.maps.LatLng(53.558584,-7.987061);
            var myOptions = {
                zoom: 17,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById(\"map_canvas\"),myOptions);
            var marker = null;
    
            function addMarker(location) {
                if (marker) marker.setMap(null);
                marker = new google.maps.Marker({
                    position: location,
                    map: map
                });
    
                var matchll = /\(([-.\d]*), ([-.\d]*)/.exec(location);
                if (matchll)
                {
                    var lat = parseFloat( matchll[1] );
                    var lon = parseFloat( matchll[2] );
                    lat = lat.toFixed(6);
                    lon = lon.toFixed(6);
                }
    
                document.getElementById(\"lat\").value = lat;
                if(document.getElementById(\"lat\").value == \"undefined\")
                {
                    document.getElementById(\"lat\").value = \"\";
                }
                document.getElementById(\"lon\").value = lon;
                if(document.getElementById(\"lon\").value == \"undefined\")
                {
                    document.getElementById(\"lon\").value = \"\";
                }
            }
    
            google.maps.event.addListener(map, 'click', function(event) {
                addMarker(event.latLng);
            });
    
        }
        //]]>
    </script>
     

Share This Page