Error with google maps (with creating markers)

Question

This code must initialize markers with google maps api. But the page turns into white when I try to open it in my browser (not works). I can't understand the problem... All of my resources are connected.

Map.jsp:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>dsf</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
  $.ajax({
    type: "POST",
    url: "http://localhost:1600/jsp/datasend.jsp",
    data: "",
    async: false,
    success: function(msg){
      window.obj = $.parseJSON(msg);
    }
  });
</script>
<div id="map"></div>
<script>
  var marks = [];
  window.total_count = obj.length;
  for(var i=0; i<total_count; i++){
    marks[i] = [Number(obj[i]['gps'][0]),Number(obj[i]['gps'][1])];
  }
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: {lat: marks[0][0], lng:marks[0][1]}
    });
    setMarkers(map);
  }
  //alert(total_count);
  function setMarkers(map) {
    for(var i=0; i<total_count; i++){
      var image = 'http://localhost:1601/graphic/marker.svg'; //+ obj[i]['marker'] + '.svg';
      var marker = new google.maps.Marker({
        position: {lat: marks[i][0], lng: marks[i][1]},
        map: map,
        icon: image
      });
    }
  }
</script>
<script async true src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxJe0GV6Oquvs4I8yZpEQdC7BZ-X5YXCs&signed_in=true&callback=initMap"></script>
</body>
</html>

The response of datasend looks like {"data":{"id":[ 1 ]}{"latitude":[ 56.55557 ]}{"longitude":[ 53.678789 ]}{"distancefortb":[ d ]}}

What's wrong with my code?

Answer 1

I have created a sample with one marker (Nagpur-India). Hope this code will be helpful.

<!DOCTYPE html>
<html> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
 <title>Google Maps Markers</title> 
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script type="text/javascript">

   var map;
   // Creates the map
   function initialize() {
       map = new google.maps.Map(document.getElementById('map'), {
       zoom: 10,
       center: new google.maps.LatLng(21.1458004, 79.0881546), //For Nagpur
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });
   }

   // This function takes an array argument containing a list of marker data
  function generateMarkers(locations) {
     for (var i = 0; i < locations.length; i++) {
      new google.maps.Marker({
        position: new google.maps.LatLng(21.1011957, 79.1026544),
        map: map,
        title: locations[i][0]
      });
   }
 }
</script>
</head> 
<body> 
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">

window.onload = function () {
    initialize();
    var loc2 = [];
    // I have created by getting the city and country. Then find Latitude and Longitude.
    var address = 'Nagpur,India';
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            loc2.push("['Nagpur'," + 21.2333 + "," + 79.2000 +"]");
            locations1 = "[" + loc2 + "]";
            generateMarkers(eval(locations1));
        } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
};
</script>
</body>
</html>

This code will initiate the map with marker(Nagpur-India). Similarly you can customize for your need. Hope this helps.

Error with google maps (with creating markers)

Question

1 answers

solution1
1 ACCPTED 2016-03-03 08:02:34

Error with google maps (with creating markers)

Question

1 answers

solution1 1 ACCPTED 2016-03-03 08:02:34

solution1
1 ACCPTED 2016-03-03 08:02:34