Setting the value of a variable in JavaScript

Question

As you can see in the following code I'm fetching data from the MySQL database, but I got stuck when I wanted to use fetched "location" to set the "position" of a marker on a google map.

<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxx&sensor=true"></script>
<script>
  $.getJSON('http://www.wawhost.com/appProject/fetchmarker.php?callback=?', function(data) {
    for (var i = 0; i < data.length; i++) {
      localStorage.loc = data[i].location;
    }
  });
</script>
<script>
  function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
    var mapOptions = {
      zoom: 4,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var marker = new google.maps.Marker({
      position: 'new google.maps.LatLng(' + localStorage.loc + ')',
      map: map,
      title: 'Hello World!'
    });
  }
</script>
</head>

<body onload="initialize()">
<div id="map_canvas"></div>
</body>

Thank you!

Call initialize() after your JSON has loaded.

Blender
– Blender

2013-01-10 03:29:08 +00:00
Commented Jan 10, 2013 at 3:29 — Blender
– Blender, Commented Jan 10, 2013 at 3:29

Aesthete · Accepted Answer · 2013-01-10 03:51:24Z

1

Make the request when the page has loaded, and call the initialize function from the AJAX success callback.

$(function() {
  $.getJSON('http://www.wawhost.com/appProject/fetchmarker.php?callback=?', function(data) {
     for (var i = 0; i < data.length; i++) {
       localStorage.loc = data[i].location;
     }
     initialize();
  });
});

Also, this line looks a bit sketchy. position is supposed to be a new google.maps.LatLng.

position: 'new google.maps.LatLng(' + localStorage.loc + ')'.

LatLng takes an latitude and longitude argument to construct the object. What you've stored from the request is a string, with comma seperated lat and long values.

// First split the string into lat and long.
var pos = localStorage.loc.split(",");
// Parse the strings into floats.
var lat = parseFloat(pos[0]);
var lng = parseFloat(pos[1]);    
// Create a new marker with the values from the request.  
var marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  map: map,
  title: 'Hello World!'
});

Try it here.

edited Jan 10, 2013 at 3:51

answered Jan 10, 2013 at 3:32

Aesthete

18.9k6 gold badges38 silver badges46 bronze badges

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

5 Comments

alesko007 Over a year ago

It's supposed to look like this -> position: new google.maps.LatLng(-25.363882, 131.044922)

Aesthete Over a year ago

@alesko007 - If you know what it's supposed to look like then why don't you fix it. I made changes and got it working here. See the edits and the fiddle link.

Aesthete Over a year ago

@alesko007 - Try using the console window to log and set breakpoints. You should have been able to see that the type was wrong.

alesko007 Over a year ago

I'm not familiar with javascript. Thank you for your help. I hope I'll get it right.

Aesthete Over a year ago

Good luck. Make sure you use the developer tools (breakpoints, logging, call stacks) in your browser, it will save you a lot of headache.

Collectives™ on Stack Overflow

Setting the value of a variable in JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related