google map to show marker on address

Question

js:

     function initialize() {
        $('#refreshmap').on('click', initialize);
        var location_latitude = $("#id_location_latitude").val()
        var location_longitude = $("#id_location_longitude").val()
    """"""""""""""
   some code here
    """""""""""""
      $(document).ready(function(){
            function codeAddress() {
            var address = "{{ userprofile.work_street }},{{userprofile.work_suburb}},{{userprofile.work_postcode}},{{ userprofile.work_country }}";
            alert(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);
                 }
               });
              }
              $("#img-clck").click(codeAddress);
           });
         '''''''
        some code
       ''''''''''
     google.maps.event.addDomListener(window, 'load', initialize);

update:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    var geocoder = new google.maps.Geocoder();
    function geocodePosition(pos) {
        geocoder.geocode({
            latLng: pos
        }, function(responses) {
            if (responses && responses.length > 0) {

            }
        });
    }
    function updateMarkerPosition(latLng) {
        document.getElementById('id_location_latitude').value = latLng.lat();
        document.getElementById('id_location_longitude').value = latLng.lng();
    }

    function initialize() {
        $('#refreshmap').on('click', initialize);
        var location_latitude = $("#id_location_latitude").val()
        var location_longitude = $("#id_location_longitude").val()

        if(location_latitude){
            var latLng = new google.maps.LatLng(location_latitude, location_longitude);

        }else{
            var latLng = new google.maps.LatLng(-37.813988, 144.963441);
         }
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom: 8,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

       $(document).ready(function(){

        var address = "{{ userprofile.work_street }},{{userprofile.work_suburb}},{{userprofile.work_postcode}},{{ userprofile.work_country }}";
        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
           });
             $("#img-clck").hide();
             } 
           });        
       });


        var marker = new google.maps.Marker({
            position: latLng,
            title: 'Position',
            map: map,
            draggable: true,
            visible:false
        });

        updateMarkerPosition(latLng);
        geocodePosition(latLng);
        google.maps.event.addListener(marker, 'drag', function() {

            updateMarkerPosition(marker.getPosition());
        });
        if(location_latitude){
            marker.setVisible(true);
           $("#img-clck").hide();
        }
        $('#img-clck').click(function(){
            marker.setVisible(true);
            $("#img-clck").hide();
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

This is my code to show marker on given address,it is showing the marker on the given address on button click.I want it to happen on page load.The marker should show the given address on page load,without button click.How to do this.

Answer 1

You are calling the codeAddress function on the click event of the button. Instead you should call the codeAddress function from initialize function which is called onload.

function initialize() {
    $('#refreshmap').on('click', initialize);
    var location_latitude = $("#id_location_latitude").val()
    var location_longitude = $("#id_location_longitude").val()
    codeAddress();

I am not sure if it will be called when it is declared inside $(document).ready. You could either move it out as a standalone function or the other alternate would be to just remove it out of the method i.e.

$(document).ready(function(){

        var address = "{{ userprofile.work_street }},{{userprofile.work_suburb}},{{userprofile.work_postcode}},{{ userprofile.work_country }}";
        alert(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);
             }
           });

          $("#img-clck").click(codeAddress);
       });

This way the code will execute directly when $(document).ready is called.