CODEWITHSUNDEEP
javascriptgoogle-maps
Randy Minder
Randy Minder

Reputation: 48402

Google Maps Error - Invalid latitude / longitude?

I have the following code:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div class="row">
    <div class="col-md-6" id="googleMap" style="height:500px;"></div>
</div>

<script>
    function initialize() {
        var mapProp = {
            center: new google.maps.LatLng(44.6656, -83.5753),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

        var marker = new google.maps.Marker({
            position: mapProp,
        });

        marker.setMap(map);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

The map displays fine but I can't add the marker. I get the following error:

setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

I don't see how the latitude and longitude could be invalid because the resulting generated map shows the correct location. But no marker.

Upvotes: 0

Views: 3871

Answers (1)

Johan
Johan

Reputation: 35194

The marker's position property should be of the type LatLng:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div class="row">
    <div class="col-md-6" id="googleMap" style="height:500px;"></div>
</div>

<script>
    function initialize() {

        var cord = new google.maps.LatLng(41.6656, -83.5753);

        var mapProp = {
            center: cord,
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

        var marker = new google.maps.Marker({
            position: cord,
        });

        marker.setMap(map);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

http://jsfiddle.net/5am3V/

Upvotes: 2

Related Questions