web-dev-qa-db-fra.com

Comment réparer Uncaught InvalidValueError: setPosition: pas un LatLng ou LatLngLiteral: dans la propriété lat: pas un nombre?

J'essaie de porter mes fonctions googlemaps v2 en v3.

Mais de toute façon, je me suis retrouvé coincé dans une erreur étrange et je ne pouvais pas trouver ce que je faisais mal.

Erreur: Uncaught InvalidValueError: setPosition: pas un LatLng ou LatLngLiteral: propriété n °: pas un nombre% 7Bmain, adsense, géométrie, zombie% 7D.js: 25

Voici mon initialisation de carte:

var map = new google.maps.Map(document.getElementById("map"),{
  zoom:4
  size:new google.maps.Size(580,440),
  mapTypeControl: true,
  mapTypeControlOptions: {
    style:google.maps.MapTypeControlStyle.VERTICAL_BAR,
    position: google.maps.ControlPosition.BOTTOM_CENTER,
  },
  panControl: true,
  panControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT,
  },
  zoomControl: true,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.LEFT_CENTER,
  },
  scaleConrol: true,
  scaleControlOptions:{
    position: google.maps.ControlPosition.TOP_LEFT ,
  },
});
map.setCenter(new google.maps.LatLng(49.477643, 9.316406));

et voici la partie avec mon erreur:

function drawTraders(map, options) {
var traders_uri = options.traders_uri || '';
if ('' == traders_uri) {
    return false;
}

// get the informations
$.getJSON(traders_uri, function(data) {
    // look through the information
$.each(data.traders, function(i, trader) {
var icon = options.icon_image_uri;

var markerIcon = new google.maps.MarkerImage(icon,
    // This marker is 20 pixels wide by 32 pixels tall.
    new google.maps.Size(25, 25),
    // The Origin for this image is 0,0.
    new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    new google.maps.Point(0, 32)
);

var html = 'test';

/*Information from chromium debugger
trader: Object
    geo: Object
        lat: "49.014821"
        lon: "10.985072"

*/
var myLatlng = new google.maps.LatLng(trader.geo.lat,trader.geo.lon);

/*here is the error in new google.maps.Marker()*/
var marker = new google.maps.Marker({
    position:   myLatlng,
    map: map,
    icon : markerIcon,
});

var infowindow = new google.maps.InfoWindow({
    content: html
});
}

Edit: l'appel de drawTraders

 drawTraders(map, {
        traders_uri: "getTraders.php",
        icon_image_uri: "icon-cms.gif",
 });

J'utilisais cet exemple Fenêtre d'information

Modifier: 

Fiddle qui ne fonctionne pas

Fiddle qui fonctionne

javascriptgoogle-maps-api-3
37
demonking

Uncaught InvalidValueError: setPosition: pas un LatLng ou LatLngLiteral: dans la propriété lat: pas un nombre

Cela signifie que vous ne passez pas numbers dans le constructeur google.maps.LatLng. Par votre commentaire:

/*Information from chromium debugger
trader: Object
    geo: Object
        lat: "49.014821"
        lon: "10.985072"

*/

trader.geo.lat et trader.geo.lon sont des chaînes et non des nombres. Utilisez parseFloat pour les convertir en nombres:

var myLatlng = new google.maps.LatLng(parseFloat(trader.geo.lat),parseFloat(trader.geo.lon));
94
geocodezip

J'ai eu le même problème avec exactement le même message d'erreur. En fin de compte, l’erreur était que j’appelais toujours le javascript Maps v2. Je devais remplacer:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=####################" type="text/javascript"></script>

avec

<script src="http://maps.googleapis.com/maps/api/js?key=####################&sensor=false" type="text/javascript"></script>

après cela, ça a bien fonctionné. m'a pris un moment ;-)

20
CodeCountZero

J'avais le même problème, le fait est que l'entrée de lat et long doit être String. Ce n'est qu'alors que j'ai réussi.

par exemple:

Manette.

 ViewBag.Lat = object.Lat.ToString().Replace(",", ".");

 ViewBag.Lng = object.Lng.ToString().Replace(",", ".");

Voir - fonction javascript

<script>
    function initMap() {
        var myLatLng = { lat: @ViewBag.Lat, lng: @ViewBag.Lng};

        // Create a map object and specify the DOM element for display.
        var map = new window.google.maps.Map(document.getElementById('map'),
        {
            center: myLatLng,
            scrollwheel: false,
            zoom: 16
        });

        // Create a marker and set its position.
        var marker = new window.google.maps.Marker({
            map: map,
            position: myLatLng
            //title: "Blue"
        });
    }
</script>

Je convertis la valeur double en chaîne et fais une substitution dans le ',' en '.' Et tout fonctionne normalement.

3
Julio Cezar

Utiliser angular-google-maps 

$scope.bounds = new google.maps.LatLngBounds();
for (var i = $scope.markers.length - 1; i >= 0; i--) {
    $scope.bounds.extend(new google.maps.LatLng($scope.markers[i].coords.latitude, $scope.markers[i].coords.longitude));
};    
$scope.control.getGMap().fitBounds($scope.bounds);
$scope.control.getGMap().setCenter($scope.bounds.getCenter());
1
Cristian Agudelo

J'ai eu le même problème lors de la définition du centre de la carte avec map.setCenter(). Utiliser Number() résolu pour moi. Dû utiliser parseFloat pour tronquer les données.

extrait de code: 

 var centerLat = parseFloat(data.lat).toFixed(0);
 var centerLng = parseFloat(data.long).toFixed(0);
 map.setCenter({
      lat: Number(centerLat),
      lng: Number(centerLng)
 });
0
Asghar Musani

Vous passez probablement la valeur null si vous chargez les coordonnées de manière dynamique, activez une vérification avant d'appeler le chargeur de carte, par exemple: if(mapCords){loadMap}

0
Ed Barahona