Linked Questions

Popular Questions

Google maps no longer serving tiles when initialized using JSON

Asked by At

I have a google map that is no longer serving tiles. This code was written (not by me) in 2014. The app was working fine up until a few months ago. A single tile is loaded for the initial location and then no additional tiles are loaded. I believe the initial tile is being called from memory and not being loaded. When you scroll the map its just grey. I don't believe it is the key, It is a google maps version 3 key and I tested it on a simple map and it works just fine. I think this has something to do with the way the map is referenced from the map.js file as an element. Map(el). I would just like to get this map working again. Any direction would be very helpful. Thank you.

The map is initialized using JSON as follows:

Relevant pieces of the main.html file:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script>
<script type="text/javascript" src="js/Prototypes/XYZ/Map/Map.js"></script>
<div id="map"> </div>
<script>
        $(function(){
            document.addEventListener("deviceready", function() {                                          
                XYZ.initialize();
            }, false);
            app.initialize();

        });
</script>

Relevant chunk from the map.js file

function Map(el){
if($(el)){
    this.element = el;
    this.map = new google.maps.Map(document.getElementById(this.element), {
        center: new google.maps.LatLng(39.xxxxxx,-83.xxxxxx),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 11,
        zoomControlOptions: {
            position : google.maps.ControlPosition.TOP_LEFT
        },
        panControl: false,
        streetViewControl: false,
    });
} else {
    this.element = null;
}
this.markers = {};

infowindow = new google.maps.InfoWindow({});

this.headingPin = new google.maps.Marker({
    optimized: false,
    position: new google.maps.LatLng(39.976068,-83.003297),
    map: this.map,
    icon: {url: 'img/pins/heading/0.png'}
});

this.radiusCircle = new google.maps.Circle();
this.locked = true;
this.setHeadingPinPosition(39.xxxxxx,-83.xxxxxx);
}

Relevant chunk from main.js

var XYZ = {
initialize: function() {
    var lat = null;
    var lng = null;
    var laststorylat = 0.0;
    var laststorylng = 0.0;
    var force_refresh_call = false;

    if(!localStorage.getItem('intro')){
        $('#intro-1').show();
    }
    $('#close-intro').tap(function(){
        $('#intro-1').hide();
        localStorage.setItem('intro', 1);
    });
    //gimme console!
    hconsole = new Console('.console');
    hconsole.enable(true);
    //hconsole.show();


    hconsole.log("Loading Geolocation Object");
    geo = new Geolocation();

    hconsole.log("Loading Map");
    map = new Map('map');

Related Questions