Question

Hey I’m new to the google maps api, and I have an embedded map, i’m using geolocation to get the users lat and long, and i’m then filling in the gaps in the maps api. The map, however doesn’t work when I use the generated lat and long, but does work if i just type one in

Non-working code:

     var map;
  var infowindow;

  function initialize() {

    if (navigator.geolocation)
   {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
    function showPosition(position)
    {

    var latlon = new google.maps.LatLng( position.coords.latitude + "," + position.coords.longitude );

    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: latlon,
      zoom: 15,
      disableDefaultUI: true
    });

    var request = {
      location: latlon,
      radius: 555,
      types: ['bar']
    };
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, callback);
  }

  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
     }
    }
   }
  }

  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function() {
      alert(place.name);
    });
  }

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

Working code

 var map;
  var infowindow;

  function initialize() {
    var latlon = new google.maps.LatLng(-33.8665433, 151.1956316);

    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: latlon,
      zoom: 15,
      disableDefaultUI: true
    });

    var request = {
      location: latlon,
      radius: 555,
      types: ['bar']
    };
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, callback);
  }

  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
    }
  }

  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function() {
      alert(place.name);
    });
  }

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

Any help if appreciated 🙂

Answer 1

Replace your line:

var latlon = new google.maps.LatLng
      (position.coords.latitude + "," + position.coords.longitude);

with

var latlon = new google.maps.LatLng
      (position.coords.latitude, position.coords.longitude);

The problem is in concatenating two values into one where constructor expects two parameters.