Anastasie Laurent
Anastasie Laurent

Reputation: 1179

google maps marker is not defined

This is my code

var map_canvas = document.getElementById('map_canvas');
var map_options = { center: new google.maps.LatLng(44.5403, -78.5463), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(map_canvas, map_options);


 google.maps.event.addListener(map, 'click', function(event) {
     if(marker){
         marker.setMap(null);
     }
     marker = new google.maps.Marker({
         position: event.latLng,
         map: map
     });
     $("#latitude").val(event.latLng.lat());
     $("#longitude").val(event.latLng.lng());
     map.setCenter(event.latlng);
 });

 console.log($("#longitude").val());
 if (($("#latitude").val()) && ($("#longitude").val())){
     var point = new google.maps.LatLng(($("#latitude").val()), ($("#longitude").val()));
     marker = new google.maps.marker({
         position: point,
         map: map
     });
     map.setCenter(point, 8);
 }

please notice that I have added a listener for on click on the map to add the marker, and it is working. I mean when I click on the map, the marker appears.

However, when I submit the page, and if there is an error in the inputs, I return the page back to the user. In that case, if the use has added a map, I wanted to create the map for him. that is why I used this code:

console.log($("#longitude").val());
if (($("#latitude").val()) && ($("#longitude").val())){
 var point = new google.maps.LatLng(($("#latitude").val()), ($("#longitude").val()));
 marker = new google.maps.marker({
     position: point,
     map: map
 });
 map.setCenter(point, 8);

however, i got exception Uncaught TypeError: undefined is not a function in the line marker = new google.maps.marker({ could you help please?

Upvotes: 0

Views: 3720

Answers (1)

reaxis
reaxis

Reputation: 1431

Make sure you use the right capitalization for Google Maps API function names, google.maps.marker should be google.maps.Marker.

Upvotes: 2

Related Questions