Set value from database to JavaScript using php

Question

I have to show google map marker in my website where the value of latitude and longitude is coming from database from latitude and longitude columns.

Initially JavaScript code is

var map;
function initialize() {
    map = new GMaps({
        div: '#map',
        lat: -37.817917,
        lng: 144.965065,
        zoom: 16

    });
    map.addMarker({
        lat: -37.81792,
        lng: 144.96506,
        title: 'Marker with InfoWindow',
        icon: 'images/map-marker.png',
        infoWindow: {
            content: '<p>Melbourne Victoria, 300, Australia</p>'
        }
    });
}

I tried with placing php code as:

lat: <?php echo $latitude; ?>
lng: <?php echo $latitude; ?>

But it doesn't work.

I figure out one more way to do this is set input field value to the coordinates and then call it to JavaScript using getElementById

<input id="map_latitude" value="<?= $latitude ?>" hidden>
<input id="map_longitude" value="<?= $longitude ?>" hidden>

and in JavaScript: (this is just experimental, don't know whether correct or not)

lat: getElementById('#map_latitude'),
lng: getElementById('#map_longitude')

The second part should works. Try to make lat: $('#map_latitude').val(), lng: .$(#map_longitude').val(). If you set JQuery. PS : make sure that you're not getting empty values. — KubiRoazhon
– KubiRoazhon, Commented Apr 14, 2016 at 15:53
Possible duplicate of How to pass variables and data from PHP to JavaScript? — Hypaethral
– Hypaethral, Commented Apr 14, 2016 at 16:40

Ravinder Reddy · Accepted Answer · 2016-04-14 15:58:27Z

2

For second option try the below

lat: document.getElementById('map_latitude').value,
lng: document.getElementById('map_longitude').value

answered Apr 14, 2016 at 15:58

Ravinder Reddy

3,8791 gold badge16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phiter · Accepted Answer · 2016-04-14 15:54:12Z

1

This should totally work:

div: '#map',
lat: <?php echo $latitude; ?>,
lng: <?php echo $longitude; ?>,

The second option should work too but with a little change.

var map;
var lati = getElementById('map_latitude').value;   //Need to select the value
var longi = getElementById('map_longitude').value; //and remove the hashtag ( # )
function initialize() {
    map = new GMaps({
        div: '#map',
        lat: lati,
        lng: longi,
        zoom: 16

Always check your console for errors.

answered Apr 14, 2016 at 15:54

Phiter

15k14 gold badges52 silver badges87 bronze badges

Collectives™ on Stack Overflow

Set value from database to JavaScript using php

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related