After reading several articles on missing markers, I'm still facing a unique issue that doesn't seem to have a clear solution. The problem arises when attempting to render a basic map with just one marker and a fixed location. Despite Chrome dev debugging indicating the presence of the marker with all properties set correctly, it simply won't display on the map. Strangely enough, adding an Infowindow works flawlessly using the same map and marker setup.
Here's the simplified code for a webpage displaying a U.S. map with a single centered marker:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div style="height:500px" id="map-canvas"></div>
<script>
var myMap;
var marker;
function mapInitialize() {
var latlng = new google.maps.LatLng(35, -96);
var mapOptions = {
zoom: 4,
center: latlng,
mapTypeId: 'roadmap'
}
myMap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
marker = new google.maps.Marker({
map: myMap,
position: latlng,
title: "Hello World!",
visible: true
});
google.maps.event.addDomListener(window, 'load', mapInitialize);
</script>
In a Backbone map view context, things start to get a bit trickier as there might be a need for a marker collection, based on other similar cases. Although I've simplified the code by moving everything into an initialize function for troubleshooting purposes, the issue persists with just one marker.
var MapView = Backbone.View.extend({
el: "body",
initialize: function() {
var myMap;
var marker;
var latlng = new google.maps.LatLng(35, -96);
var mapOptions = {
zoom: 4,
center: latlng,
mapTypeId: 'roadmap'
}
myMap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
marker = new google.maps.Marker({
map: myMap,
position: latlng,
title: "Hello World!",
visible: true
});
}
});
The comparison in Chrome Dev tools between the plain page scenario (/map.html) and the Backbone implementation (/#/map, calling for a new MapView creation) confirms that the marker's properties are correctly set and associated with the map element.