CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
user8013429
user8013429

Reputation:

Map Marker is not displaying using Google Map API

I've integrated the google map api code. Map is displaying fine but map marker is not displaying.

<div id="googleMap" style="width:100%;height:400px;"></div>

<script>
function myMap() {
var centerPosition = {lat: 51.508742, lng: -0.120850};
var mapProp= {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
          position: centerPosition,
          map: mapProp,
          title: 'Hello World!'
        });
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_API_KEY&callback=myMap"></script>

Upvotes: 0

Views: 191

Answers (2)

Clement Levesque
Clement Levesque

Reputation: 1212

It is just because the property you set to your marker should be map and not mapProp :

var marker = new google.maps.Marker({ position: centerPosition, map: map, title: 'Hello World!' }); }

Upvotes: 1

user7138697
user7138697

Reputation:

you are setting the map to the wrong map

map: mapProp, - > map: map,

Implemented to you function:

var centerPosition = {
    lat: 51.508742,
    lng: -0.120850
  };
  var mapProp = {
    center: new google.maps.LatLng(51.508742, -0.120850),
    zoom: 5,
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
  var marker = new google.maps.Marker({
    position: centerPosition,
    map: map,
    title: 'Hello World!'
  });

Working JSFiddle : https://jsfiddle.net/6fey85dd/8/

Upvotes: 1

Related Questions