Google Map Work In Local Computer But Not Working In The Live Server

- Advertisement -
- Advertisement -

Google map is the largest online map website. We can add our office or business location on the map and also integrate on our website. But in the year 2016 Google bring a huge change in the Google Map technical system. As a result, a normal computer user cannot integrate map on their website. They need to use API(Application programming interface). So they need to hire a developer for integrating map.

Sometimes you may need to use the map without API key. Cause, the API can conflict with other scripts. As a result, a developer faces some common problem to do the work. Like as- map working in the localhost, but when we upload the map HTML files on our live server, we see an error in the below image- “Oops! Something went wrong.This page didn’t load Google Maps correctly. See the JavaScript console for technical details.
Google_map_error
and when you open the console you see the error-
Google_map_error_console
So what is the solution? I have found many solutions. But the solution is special for you if you want to show multiple area markers on your website. Let’s start-
HTML:

<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>

CSS:

#map_wrapper {
    height: 400px;
}

#map_canvas {
    width: 100%;
    height: 100%;
}

Include jQuery before inserting the JavaScript code:

jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };
                    
    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
        
    // Multiple Markers
    var markers = [
        ['Austin, Texas', 30.267153,-97.743061],
        ['San Francisco, California', 37.774929, -122.419416],
		['Seattle, Washington', 47.606209, -122.332071],
		['New York City, New York', 40.712775, -74.005973]
    ];
                        
    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>Autin</h3>' +
        '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>San Francisco</h3>' +
        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
        '</div>'],
        ['<div class="info_content">' +
        '<h3>New York City</h3>' +
        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
        '</div>'],
        ['<div class="info_content">' +
        '<h3>Seattle</h3>' +
        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
        '</div>']
    ];
        
    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    
    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });
        
        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });
    
}

If you run the code, it’ll work on your local computer, but not on the server. I didn’t use API key for the map-

script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";

Now if you upload the HTML file on your live server, it’ll not work. So I’ve written the below code so that you can bypass the API problem. So it’s your solution– how to bypass the Google map API key.

After the above script, write the below JavaScript code:

// hack Google Maps to bypass API v3 key (needed since 22 June 2016 http://googlegeodevelopers.blogspot.com.es/2016/06/building-for-scale-updates-to-google.html)
var target = document.head;
var observer = new MutationObserver(function(mutations) {
    for (var i = 0; mutations[i]; ++i) { // notify when script to hack is added in HTML head
        if (mutations[i].addedNodes[0].nodeName == "SCRIPT" && mutations[i].addedNodes[0].src.match(/\/AuthenticationService.Authenticate?/g)) {
            var str = mutations[i].addedNodes[0].src.match(/[?&]callback=.*[&$]/g);
            if (str) {
                if (str[0][str[0].length - 1] == '&') {
                    str = str[0].substring(10, str[0].length - 1);
                } else {
                    str = str[0].substring(10);
                }
                var split = str.split(".");
                var object = split[0];
                var method = split[1];
                window[object][method] = null; // remove censorship message function _xdc_._jmzdv6 (AJAX callback name "_jmzdv6" differs depending on URL)
                //window[object] = {}; // when we removed the complete object _xdc_, Google Maps tiles did not load when we moved the map with the mouse (no problem with OpenStreetMap)
            }
            observer.disconnect();
        }
    }
});
var config = { attributes: true, childList: true, characterData: true }
observer.observe(target, config);

Here is the live demo of multiple Google map multiple markers with bypass Google map API key- http://themepack.net/aaa/googleMapDemo

Hope that you’ll enjoy the article. If have questions, please leave a comment below. Share the solution on your social profile.

- Advertisement -
Mofizulhttp://mofizul.com
Web Developer & Front-end Expert

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

35,800FansLike
75,435FollowersFollow
6,048,675SubscribersSubscribe
- Advertisement -