views:

61

answers:

2

I need to create mark clicking in the map, thanks :)

google.maps.event.addListener(map, 'click', function()
{
  alert('click'); 
});
+1  A: 
var marker;

google.maps.event.addListener(map, 'click', function(e) {
    if ( !marker ) {
        marker = new google.maps.Marker({ map: map });
    }

    marker.setPosition(e.latLng);
});
hsz
A: 

v3 geocode result html, body { height: 100% }
#map { width: 100%; height: 512px; }
var renderGeolocalizacion = function() { var geocoder, map, markersArray=[];

        var __construct = function()
        {
          var w_o;
          if(typeof(window.onload)=='function')
              w_o = window.onload;

          window.onload = function()
          {
            if(typeof(w_o)=='function')
                w_o();

            var mapOpts =
            {
              zoom: 8,
              center: new google.maps.LatLng(43.2569629,-2.9234409),
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              scaleControl: true
            }

            maps.Map(document.getElementById("map"), mapOpts);
            google.maps.event.addListener(map, 'zoom_changed', function()
            {
                document.getElementById('zoom').value = map.getZoom(); 
            });    
            google.maps.event.addListener(map, 'click', function(e)
            {
                clearOverlays();
                var marker = new google.maps.Marker(
                {
                    position: e.latLng,
                    map: map,
                    draggable: true
                });
                markersArray[0] = marker;
                var position = marker.getPosition();
                geocode(marker.getPosition().b+", "+marker.getPosition().c, true);                                                                                
            });

            /**
              * geocoder
              */
            geocoder = new google.maps.Geocoder();
            document.getElementById('geolocation').onsubmit = function()
            {
                clearOverlays();
                geocode(document.getElementById('search-field').value);
                return false;
            };                                        
          };                                                                                                                                
        };
        var in_array = function(value, array, strict)
        {
            for(var i in array)
                if(strict)
                    if(array[i]===value)
                        return true;
                else
                    if(array[i]==value)
                        return true;
            return false;                                    
        };

        var clearOverlays = function()
        {
            if (markersArray)
                for (i in markersArray)
                    markersArray[i].setMap(null);
        };    

        var geocode = function(addr, mark)
        {
            geocoder.geocode(
            {
              'address': addr,
              'language': 'ES',
              'region': 'ES'                                
            }, geocodeResult);
        };
        var geocodeResult = function(response, status)
        {
            if (status == google.maps.GeocoderStatus.OK && response[0])
            {
                clearOverlays();
                response = response[0];                                    
                map.setCenter(response.geometry.location);
                var marker = new google.maps.Marker(
                {
                    map: map, 
                    position: response.geometry.location,
                    draggable: true
                });    
                google.maps.event.addListener(marker, 'mouseup', function(event)
                {                                    
                    var position = marker.getPosition();
                    geocode(marker.getPosition().b+", "+marker.getPosition().c);                                         
                });                                                                                                                
                markersArray[0] = marker;
                getInfo(response);                                                                                                                                            
            }                                                                                                   
        };
        var getInfo = function(response)
        {
            var tmp = {};
            var allowed_types = ['locality', 'administrative_area_level_2', 'administrative_area_level_1', 'country', 'postal_code'];
            for(var i in response.address_components)
            {
                var found = false;
                for(var j in response.address_components[i].types)
                {
                    if(found)
                    {
                        found=false;
                        continue;
                    }
                    if (in_array(response.address_components[i].types[j]), allowed_types, true)
                    {
                        found = true;
                        tmp[response.address_components[i].types[j]] = response.address_components[i].long_name;
                        console.log(response.address_components[i].types[j] + ": " + response.address_components[i].long_name);
                    }                                                                            
                }                                                                
            }

            document.getElementById('localidad').value = tmp.locality;
            document.getElementById('provincia').value = tmp.administrative_area_level_2;
            document.getElementById('comunidad').value = tmp.administrative_area_level_1;
            document.getElementById('pais').value = tmp.country;
            document.getElementById('codigo_postal').value = tmp.postal_code;

            document.getElementById('longitud').value = response.geometry.location.c;
            document.getElementById('latitud').value = response.geometry.location.b;

            document.getElementById('zoom').value = map.getZoom();                        
        };                                                                                                                
        __construct();
    };    
    new renderGeolocalizacion();                    
    //--> 
    </script>            
    </head>
    <body>
    <div>
        <form id="geolocation">
            <label for="search-field">Search field</label><input type="text" size="40" id="search-field" name="search-field" title="Placename or address"/>
            <input type="submit" value="Search" title="Or hit [Enter] on keyboard"/>                
            <input type="hidden" id="localidad" name="localidad" value="" />
            <input type="hidden" id="provincia" name="provincia" value="" />
            <input type="hidden" id="comunidad" name="comunidad" value="" />
            <input type="hidden" id="pais" name="pais" value="" />
            <input type="hidden" id="codigo_postal" name="codigo_postal" value="" />
            <input type="hidden" id="longitud" name="longitud" value="" />                
            <input type="hidden" id="latitud" name="latitud" value="" />
            <input type="hidden" id="zoom" name="zoom" value="" />                
        </form>
    </div>
    <div id="map">
    </div>
</body>

ZiTAL