Google Map is not displaying with V3

Question

I have wrote code which display marker on my location but when i have added marker.setmap method then map is not loaded where i am wrong

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=ABBByyyeessssf77Z6S8c-M-T3Ea2j-uFczWXFxKh0&sensor=true">
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".contact_map .load").append("Loading Map...")
    });

function initialize() {
            $(".contact_map .load").empty();
    var mapOptions = {
      center: new google.maps.LatLng(22.722337, 75.881732),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
    var marker = new google.maps.Marker({
            position: myLatlng,
            title:"Hello World!"
            });
  }

  google.maps.event.addDomListener(window, 'load', initialize)
     marker.setMap(map);
</script>
<div class="contact_container">
<div class="contact_image">
</div>
    <div class="contact_map">
        <p class="load"></p>
    <div id="map_canvas"></div>
    </div>

</div>

Answer 1

the variable marker only exists inside the initialize function, you can't use it outside. To do that, define this var outside of the function. Also, I don't see var myLatLng defined anywhere

var marker;

function initialize() {
//your other code code
marker = new google.maps.Marker({ //don't use the word 'var' in this line
        position: myLatlng,
        title:"Hello World!"
        });
}

  google.maps.event.addDomListener(window, 'load', initialize)
  marker.setMap(map);