Dynamic markers not working using new variable

Question

var latitude = document.getElementById("latitude");
var longitude = document.getElementById("longitude");

var myCenter = new google.maps.LatLng(latitude, longitude);
var marker;

function initialize()
{
    var mapProp = {
        center: myCenter,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    marker = new google.maps.Marker({
        position: myCenter,
        animation: google.maps.Animation.BOUNCE
    });

    marker.setMap(map);
}

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

var latitude didn't get the values

here I get the values from below ids,

<div class="map" id="googleMap" style="width:100%;height:260px;overflow:hidden;"></div>
<div id="latitude"><?php echo $itemData['130']; ?></div>
<div id="longitude"><?php echo $itemData['131']; ?></div>

In $itemData['130'] and $itemData['130'] gets the value fine,

I don't know what's the mistake I done?

Answer 1

This code will work try this

function initialize() {
var latitude = document.getElementById("latitude").innerHTML;
var longitude = document.getElementById("longitude").innerHTML;
var myCenter = new google.maps.LatLng(latitude, longitude);
var marker;
var mapProp = {
center: myCenter,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
marker = new google.maps.Marker({
position: myCenter,
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 2

Your getting the object. Use .innerHTML if you want that value that is being echoed by PHP:

var latitude = document.getElementById("latitude").innerHTML;