Google Maps v3 API Markers doesn't work and leave a blank page

StackOverflow https://stackoverflow.com/questions/23578367

Question

I'm trying to make a custom map with markers. I already got a custom map that work's but when i try to add a marker it results in a blank page.

i have no idea what im doing wrong because i did everything i should do, unless I missed something.

I used custom images that are public available my correct code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" />
    <meta charset="utf-8" />
    <title>Nexoness Nation - Google Maps</title>
    <link rel="shortcut icon" href="https://maps.gstatic.com/favicon3.ico"/>
</head>

<body onload="initialize()">
       <div id="map-canvas" style="width: 100%; height: 100%"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
        var customMapTypeOptions = {
           getTileUrl: function(coord, zoom) {
                   var normalizedCoord = getNormalizedCoord(coord, zoom);
                    if (!normalizedCoord) {
                      return null;
                    }
                    var bound = Math.pow(2, zoom);
                    /*Edit this URL to where you upload your tiles...*/
                    return "http://nexonessnation.bugs3.com/tile_" + zoom + "_" + normalizedCoord.x + "-" + normalizedCoord.y + ".svg";

           },
           tileSize: new google.maps.Size(256, 256),
           isPng: true,
           maxZoom: 3,
           minZoom: 0,
           name: "Nexoness Nation"
         };

         var customMapType = new google.maps.ImageMapType(customMapTypeOptions);

            // Normalizes the coords that tiles repeat across the x axis (horizontally)
              // like the standard Google map tiles.
              function getNormalizedCoord(coord, zoom) {
                var y = coord.y;
                var x = coord.x;

                // tile range in one direction range is dependent on zoom level
                // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
                var tileRange = 8 << zoom;

                // don't repeat across y-axis (vertically)
                if (y < 0 || y >= tileRange) {
                  return null;
                }

                // repeat across x-axis
                if (x < 0 || x >= tileRange) {
                  x = (x % tileRange + tileRange) % tileRange;
                }

                return {
                  x: x,
                  y: y
                };
              }

        function initialize() {
            var myLatlng = new google.maps.LatLng(0, 0);
            var myOptions = {
              zoom: 1,
              center: myLatlng,
            mapTypeControlOptions: {
                    mapTypeIds: ["Nexoness Nation"]
                  }
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            map.mapTypes.set('Nexoness Nation', customMapType);
            map.setMapTypeId('Nexoness Nation');
          }

function addMarkers() {
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 10; i++) {
    var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
                                        southWest.lng() + lngSpan * Math.random());
    var marker = new google.maps.Marker({
      position: latLng,
      map: map_canvas
    });
  }
}


</script>

</body>
</html>

Does anybody see what i'm doing wrong?

Was it helpful?

Solution

The ID of your div ("map-canvas") in <div id="map-canvas" style="width: 100%; height: 100%"></div> does not match the id you indicate in your script: map = new google.maps.Map(document.getElementById("**map_canvas**"), myOptions);

Also in the jsfiddle you provided, you need to select no wrap - <in body> instead of onLoad in the second dropdown on the left menu because you're calling your initialize() function in the onLoad of the body.

Update: indeed, I forgot about the markers. First the function addMarkers() wasn't called from initialize(). Also let's not forget to send the "map" as a parameter so we can use it in addMarkers.

Finally getBounds is available after the event bounds_changed is fired, we just need to add a listener on it to get the values.

Here is a jsfiddle that works: http://jsfiddle.net/M2RD6/4/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top