CODEWITHSUNDEEP
javascriptgoogle-maps
Anthosiast
Anthosiast

Reputation: 556

Can't add marker on google maps

I've tried many ways and still couldn't add the marker to the google map.

To understand, have a look at the following code below:

var marker;
    var myCenter = new google.maps.LatLng(55.1231231,-1.123131);

    function initialize()
    {
    var mapOption = {
      center: myCenter,
      zoom:15,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
      panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_TOP
        },
      };

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

    var customControlDiv = document.createElement('div');
        customControlDiv.id="customControlDiv";
        AddCustomControl(customControlDiv, map);
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(customControlDiv);
    }

    function placeMarker(location) {
      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title:"You are Here!"
      });
    }

    // to add the marker to the map
    marker.setMap(map);

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

and the HTML is here 

<div id="googleMap"></div>

And I didn't forget to call from google apis. And its here

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>

So, I've followed instructions on google maps Here. But it still doesn't work. Any idea? Thanks.

Upvotes: 0

Views: 149

Answers (1)

geocodezip
geocodezip

Reputation: 161384

Issues:

  • your map is local to your initialize function
  • your placeMarker function is broken (you pass in location, but use the undefined myLatLng for the position).
  • you never call the placeMarker function
  • AddCustomControl is not defined

jsfiddle

    var marker;
    var myCenter = new google.maps.LatLng(55.1231231,-1.123131);

    function initialize()
    {
      var mapOption = {
        center: myCenter,
        zoom:15,
        mapTypeId:google.maps.MapTypeId.ROADMAP,
        panControl: true,
          panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_TOP
          },
        };

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

      // to add the marker to the map
      var marker = new google.maps.Marker({
        position: myCenter,
        map: map,
        title:"You are Here!"
      });

    }

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

Upvotes: 1

Related Questions