Question

I developed many websites using the same google maps code, but this time my marker is not showing and I can’t figure out why.

This is the code:

<link href="<%= Page.ResolveUrl("~/Assets/Styles/map.css") %>" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initializeMap() {

        var latitude = 45.483995;
        var longitude = 9.181769;

        var latlng = new google.maps.LatLng(latitude, longitude);
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var image = '<%= Page.ResolveUrl("~/Assets/Images/Contacts/Baloon.png") %>';
        var myLatLng = new google.maps.LatLng(45.4530, 9.2115);
        var beachMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image
        });
    }
</script>

And this is map.css file:

#map_canvas 
{
 height: 300px;
 width: 400px;
 text-align: center;
}

Picture is correctly on server and I can open it via browser url..

Here is a link: LINK

Answer 1

I think the problem is simply that the coordinates you give for the marker are out of the map boundaries. You can see it if you zoom out a bit.

Here’s an example using using the coordinates used to initialize the map as the marker’s coordinates: http://jsfiddle.net/Dn7Rf/1/

Or rather one centering the map around the marker: http://jsfiddle.net/Dn7Rf/2/