CODEWITHSUNDEEP
javascriptjquerygoogle-maps-api-3
Mahadi Siregar
Mahadi Siregar

Reputation: 625

Marker icon not show on jquery load

When I load this page into a div (using jQuery.load()), marker icon is not showed. The icon will show after reloaded the page. Is that caused map not initialized when i pass it into placeMarker function? How to solve it.

<script type="text/javascript">

var map;
var markers = new Array();      
var marker;

var infoWindow = new google.maps.InfoWindow();
function initialize() {
    var myLatlng = new google.maps.LatLng(-6.19605333333333,106.79684);
    var myOptions = {
            zoom: 8,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
        fillPositionForm(event.latLng);
    }); 
}

function placeMarker(location) {
    if ( marker ) {
        marker.setPosition(location);
    } else {
        marker = new google.maps.Marker({
            position: location,
            map: map,
            animation: google.maps.Animation.DROP,
            draggable: true
        });
    }
    google.maps.event.addListener(marker, 'dragend', function(event) {
        clearOverlays();
        fillPositionForm(event.latLng);
    });
}

function fillPositionForm(location){            
    jQuery("#latitude").val(location.lat());
    jQuery("#longitude").val(location.lng());
}

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

jQuery(document).ready(function() { 
    initialize();
    jQuery("#frmAddPoi").validate({
        messages: {
            latitude: "Please click on map to select poi center position",
            longitude: "Please click on map to select poi center position",
        },
        submitHandler: function(form) {
            return postForm(form, "savepoi", "listcustopoi", false, false);
        }
    });
});
</script>
<div id="map_canvas" class="widgettitle" style="height:240px;"></div>

Upvotes: 1

Views: 204

Answers (2)

david strachan
david strachan

Reputation: 7228

You are attaching placeMarker to map.click event listener.

google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
    fillPositionForm(event.latLng);
});

You need to load it after map is called.

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     placeMarker(myLatlng);

See jsFiddle

Upvotes: 2

Vincent Decaux
Vincent Decaux

Reputation: 10714

You should have your function Initialize() called after your load() success. It's better to have your javascript in your main page, not in the page loaded. Or you can use an iFrame, the easiest way.

Upvotes: -1

Related Questions