Home/ Questions/Q 7846859
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T17:43:55+00:00

Hey guys hoping for a little help here. First I created a working map

  • 0

Hey guys hoping for a little help here.

First I created a working map here: http://leongaban.com/_stack/googlemaps/firstmap.html
Pointer is shown on the spot, however I needed to remove the Map | Satellite | Terrain buttons.

Digging a bit deeper I found an example here disablingDefaults. However I could not get the map to work using my google.map.js file and my API key. So I just used the script from Google’s example page.

Now my 2nd map I have the Map view options removed, but cannot get an overlay to show up 🙁
http://leongaban.com/_stack/googlemaps/

Please Help!

Goals:

  • Use my Google maps API key
  • Remove the Map view option buttons
  • Put overlay pointer on the location.

Code for my first map with my google API 2 key:

<head>
    <title>Test Google Maps</title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyAXsNu2EwRNqKJn9OmC19WPkEJFM0r6ALk&sensor=true"
        type="text/javascript"></script>

    <script type="text/javascript">

        function initialize() {

            // var myOptions = {
            //     zoom: 16,
            //     center: new google.maps.LatLng(40.750159, -73.976473),
            //     disableDefaultUI: true,
            //     mapTypeId: google.maps.MapTypeId.ROADMAP
            //   }

            // var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            // var point = new GLatLng(40.750159, -73.976473);
            // map.addOverlay(new GMarker(point));

            var map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(40.750159, -73.976473), 13);
            map.setUIToDefault();

            var myGeographicCoordinates = new GLatLng(40.750159, -73.976473)
            map.addOverlay(new GMarker(myGeographicCoordinates));

            // map.addOverlay(new GMarker(40.750159, -73.976473));


        }

    </script>

</head>

<body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>

UPDATED
WORKING CODE! THANKS STACKERS!!!

<head>
    <title>Test Google Maps</title>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">

        function initialize() {

            var myOptions = {
                zoom: 16,
                center: new google.maps.LatLng(40.750159, -73.976473),
                disableDefaultUI: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              }

            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var myGeographicCoordinates = new google.maps.LatLng(40.750159, -73.976473);

            var marker = new google.maps.Marker({
                map:        map,
                position:   myGeographicCoordinates,
                title:      "My First Test Marker",
                visible:    true
            }); 
            }

    </script>

</head>

<body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There’s a problem with how you define your latLng objects.

    new GLatLng(40.750159, -73.976473);

    That was used with Google Maps Api v2. Now you’re using the latest api(v3), and in new api, this is how you should do it:

    new google.maps.LatLng(40.750159, -73.976473);

    EDIT: After your edit, i see there are some problems with the marker. In API v3 this is how you make a new marker:

    var marker = new google.maps.Marker({
    map:        map,
    position:   latLng
});

    Following code sets a map, disables default UI, sets a marker and put it on the map;

    function initialize() {
 var myOptions = {
  zoom: 16,
  center: new google.maps.LatLng(40.750159, -73.976473),
  disableDefaultUI: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 }

 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 var myGeographicCoordinates = new GLatLng(40.750159, -73.976473);
 var marker = new google.maps.Marker({
  map:        map,
  position:   myGeographicCoordinates
 });
}
    • 0