Dynamically add marker to Google Map

Question

I have a Google Map that is loading up to the correct lat and lon. I would like to place a marker at that lat and lon.

Here is my code

 function initialize() { var mapCanvas = document.getElementById('map_canvas2'); var myLatLng = { lat: contactLatitude, lng: contactLongitude }; var mapOptions = { center: new google.maps.LatLng(contactLatitude, contactLongitude), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions); addMarker(myLatLng, map); } function addMarker(location, map) { var marker = new google.maps.Marker({ position: location, title: 'Home Center' }); } google.maps.event.addDomListener(window, 'load', initialize);

Everything displays just fine but the marker doesn't show up. What am I doing wrong?

geocodezip · Accepted Answer · 2020-04-04 23:58:10Z

You aren't adding the marker to the map. Either:

function addMarker(location, map) { var marker = new google.maps.Marker({ position: location, title: 'Home Center', map:map }); }

or

function addMarker(location, map) { var marker = new google.maps.Marker({ position: location, title: 'Home Center', }); marker.setMap(map); }

proof of concept fiddle

code snippet:

var contactLatitude = 42; var contactLongitude = -72; function initialize() { var mapCanvas = document.getElementById('map_canvas2'); var myLatLng = { lat: contactLatitude, lng: contactLongitude }; var mapOptions = { center: new google.maps.LatLng(contactLatitude, contactLongitude), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions); addMarker(myLatLng, map); } function addMarker(location, map) { var marker = new google.maps.Marker({ position: location, title: 'Home Center', map: map }); } google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map_canvas2 { height: 100%; width: 100%; margin: 0px; padding: 0px }

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_canvas2" style="border: 2px solid #3872ac;"></div>

Collectives™ on Stack Overflow

Dynamically add marker to Google Map

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related