I am trying to set a marker on my Google map. I think I do it like Google wants me to, however the marker does not show up on the map. What am I doing wrong? You can see the implemented map here: /?page_id=66

<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(63.4242234, 10.4439311);
var myOptions = {
  zoom: 13,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.addOverlay(new GMarker(63.4242234, 10.4439311));
}
</script>

I am trying to set a marker on my Google map. I think I do it like Google wants me to, however the marker does not show up on the map. What am I doing wrong? You can see the implemented map here: http://nidarosnaprapati.no/wordpress/?page_id=66

<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(63.4242234, 10.4439311);
var myOptions = {
  zoom: 13,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.addOverlay(new GMarker(63.4242234, 10.4439311));
}
</script>

• javascript
• google-maps

2 Answers 2

The problem is you are mixing google maps v2 code with google maps v3. The addOverlay function and GMarker are from gogle maps v2. Replace them with google maps v3 code:

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

Each version is implemented differently. One uses the G~ on the global namespace and the other is under the google.maps.~ namespace.

I don't like the new version entirely, because some objects can be constructed with JSON, while others can't. eg. LatLng and Marker.

Adding a different marker display of marker is different as well, if you don't want that standard google marker.

var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: new google.maps.MarkerImage(
        "maps/images/point.png", // reference from your base
        new google.maps.Size(36, 36), // size of image to capture
        new google.maps.Point(0, 0), // start reference point on image (upper left)
        new google.maps.Point(10, 10), // point on image to center on latlng (scaled)
        new google.maps.Size(20, 20) // actual size on map
    )
});

To destroy the marker, simply set:

marker.setMap(null);
delete marker;