CODEWITHSUNDEEP
jquerygoogle-maps-api-3google-maps-markers
doxsi
doxsi

Reputation: 1034

Google api markers are showed on Firefox, not on Chrome or Safari

I am able to show markers froma a json in firefox web browser but crome and safari not. perarps it depend on the form of my jquery script retrives the json?

My jquery code is:

   (function() {
    window.onload = function() {

        // Creating a new map
        var map = new google.maps.Map(document.getElementById("map"), {
          center: new google.maps.LatLng(41.65, -0.88),
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });


        // Get  the JSON data from PHP script

var json ;
$.getJSON("http://myserver/down.php").done(function(data) {
  console.log(data);
   json = data;
});

alert( " Benvenuto " );


        // Creating a global infoWindow object that will be reused by all markers
        var infoWindow = new google.maps.InfoWindow();

        // Looping through the JSON data
        for (var i = 0, length = json.locations.length; i < length; i++) {

                var data = json.locations[i],
                latLng = new google.maps.LatLng(data.lat, data.long);

            var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: data.nombre,
                icon: iconBase + 'schools_maps.png'
                });


            (function(marker, data) {

                // Attaching a click event to the current marker
                google.maps.event.addListener(marker, "click", function(e) {
                    infoWindow.setContent(data.nombre);
                    infoWindow.open(map, marker);
                });


            })(marker, data);

        }

    }

})();

and the HTML code that call the script is:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>MAPPA</title>
    <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />

     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3.8"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   

    <script type="text/javascript" src="map.js"></script>
  </head>
  <body>
    <h1>MAPPA PROVE</h1>
    <div id="map"></div>

  </body>
</html>

I did not try with Explorer.

Thanks on advance

Upvotes: 0

Views: 458

Answers (1)

Scoup
Scoup

Reputation: 1323

First thing here: $.getJSON is asynchronous process. So when get the "for" line the data maybe is not loaded yet.

Try this instead:

   (function() {
    window.onload = function() {

        // Creating a new map
        var map = new google.maps.Map(document.getElementById("map"), {
          center: new google.maps.LatLng(41.65, -0.88),
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });


        // Creating a global infoWindow object that will be reused by all markers
        function createPoints(json){
        var infoWindow = new google.maps.InfoWindow();

        // Looping through the JSON data
        for (var i = 0, length = json.locations.length; i < length; i++) {

                var data = json.locations[i],
                latLng = new google.maps.LatLng(data.lat, data.long);

            var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: data.nombre,
                icon: iconBase + 'schools_maps.png'
                });


            (function(marker, data) {

                // Attaching a click event to the current marker
                google.maps.event.addListener(marker, "click", function(e) {
                    infoWindow.setContent(data.nombre);
                    infoWindow.open(map, marker);
                });


            })(marker, data);
         }
        }


        // Get  the JSON data from PHP script

var json ;
$.getJSON("http://myserver/down.php").done(function(data) {
  console.log(data);
   json = data;
    createPoints(json);
});

    }

})();

I didnt search others erros, so if not work comment and we can try again.

Upvotes: 1

Related Questions