CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Mooton
Mooton

Reputation: 3

Google Maps API V3 Marker Not Loading

I am trying to get a marker to show on the google map for a website I am doing. Without the marker code the map loads fine and shows the correct location (with no marker), when I add the marker code the map no longer loads. Clearly I am missing something simple but I am not too familiar with Jquery.

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWJYTBt3bKUIsQKKsQPSnR1IHNdkAmBQs&sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(53.154662, -1.208357),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
var marker = new google.maps.Marker({
  position:(53.154662, -1.208357),
  map: map-canvas,
  title:"Hello World!"
});
  google.maps.event.addDomListener(window, 'load', initialize);

</script>

Thanks for any assistance.

Upvotes: 0

Views: 878

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

The map-property is expected to be a google.maps.Map-instance and the position-property has to be a google.maps.LatLng:

Furthermore you must create the marker when the map already has been created and in a scope where the maps-instance is accessible, e.g. at the end of initialize().

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(53.154662, -1.208357),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

    var marker = new google.maps.Marker({
      position:new google.maps.LatLng(53.154662, -1.208357),
      map: map,
      title:"Hello World!"
    });
  }

Upvotes: 1

Related Questions