Currently, I am encountering a rather peculiar issue. Upon the initial page load, the code snippet below correctly displays a marker at the specified coordinates and ensures the map is properly centered:
<div class="paddingtop">
<map data-ng-model="mymapdetail" zoom="11" center="{{item.coordinates}}" style="heigth:375px">
<marker position="[{{item.coordinates}}]" icon="./images/i.png" />
<control name="overviewMap" opened="true" />
</map>
</div>
It is worth noting that within the first tag, square brackets are omitted, while they are present in the second tag (marker). This setup successfully renders the marker.
However, upon reloading the page or navigating back to it, the marker disappears. Although the map remains centered, the marker's location shifts drastically to a completely different part of the world (to Africa instead of its original placement in Miami or elsewhere in America).
If both the center and position tags include brackets, the result is an incorrectly centered map in Africa with the marker placed there as well (even though the provided coordinates indicate somewhere in the US).
This raises the question: What could be causing this issue in the code?
To provide a complete picture, here is an example of working code:
<map data-ng-model="mymap" zoom="4" center="[38.50, -95.00]" style="heigth:375px">
<div ng-repeat="item in items">
<marker position="[{{item.coordinates}}]" icon="./images/i.png" on-click="showInfoWindow('mbar')" />
<info-window id="mbar" >
<div>
{{item.name}}
</div>
</info-window>
</div>
<control name="overviewMap" opened="true" />
</map>`