Google Maps API divides location information into separate file (JSON) data

When I click the marker in conjunction with the JSON data containing the location information and the contents of the information window in GoogleMap, the information window is displayed and I am creating a content display, but the marker disappears in the code I created.The javascript with location information entered as an array worked correctly.Please teach me.

Array in javascript

<html>
<head>
  <metacharset="utf-8"/>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">/script>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css"/>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
  <script>
  var currentWindow=null;
  function initialize() {

    var bodyHeight=$('body').height();
    $("#map").css('height', bodyHeight);

      varmyOptions={
          zoom:16,
          center: new google.maps.LatLng (35.6954806, 139.76325010000005),
          mapTypeId—Google.maps.MapTypeId.ROADMAP
      };
      varmap = new google.maps.Map( document.getElementById("map"), myOptions);
      var markers = [
      ['TAM Tokyo', 35.6954806, 139.763250100005, 'Comment A',
      ['Ogawacho Station', 35.6951212, 139.766106499998, 'Comment B',
      ['Awajimachi Station', 35.69496, 139.767460000003, 'Comment C',]
      ['Ochanomizu Station', 35.6993529, 139.765269499993, 'Comment D',
      ['Jinbo-cho Station', 35.695932, 139.75762699996, 'Comment E',]
      ['Shin-Ochanomizu Station', 35.696932, 139.76543200000003, 'Comment F']
      ];
      for (vari=0;i<markers.length;i++) {
          var name = markers[i][0];
          var latlng = new google.maps.LatLng (markers[i][1], markers[i][2]);
          var comment=markers[i][3];
          createMarker(name, latlng, comment, map);
      }
  }
  function createMarker(name,latlng,comment,map){
      var infoWindow = new google.maps.InfoWindow({
      });
      varmarker = new google.maps.Marker({
          position:latlng,
          map —map
      });
      Google.maps.event.addListener(marker, 'click', function(){
          if(currentWindow){
              currentWindow.close();
          }
          infoWindow.setContent(
            '<div class="infoWindow">'+
            '<h2>'+name+'</h2>'+
            '<p>'+comment+'</p>'+
            '</div>'
          );
          infoWindow.open(map,marker);
          currentWindow=infoWindow;
      });
  }
  google.maps.event.addDomListener(window, 'load', initialize);

  </script>
</head>

<body onload="initialize()">
  <div data-role="page"id="top">
  	<div data-role="header">
  		<h1>DEMO</h1>
  	</div>
<div role="main" class="ui-content">
<a href="#sub" data-rel="dialog" data-transition="slidedown">View dialog&raquo;/a>
  <divid="map"></div>
</div>

<div data-role="footer">
  <h1>DEMO</h1>
</div>
</div>

<div data-role="page" id="sub" data-close-btn="right">
	<div data-role="header">
		<h1>Title </h1>
	</div>
	<div data-role="main" class="ui-content">
    <p>Comments begin here</p>
		<a href="#"data-role="button"data-rel="back">Close</a>
	</div>
</div>
</body>

<style type="text/css">
#map{
 width: 100%;
 height —auto;
}

# infoWindow {
  width —300px;
  height —400px;
}
</style>

<html>
<head>
<metacharset="utf-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">/script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script>
var currentWindow=null;
$(function(){
$.getJSON("maps.json", function(markers){
  var setno = markers.length;
  variable = new Array();
  varlat = new Array();
  varlng = new Array();
  var text = new Array();
  for (vari=0;i<markers.length;i++) {
    title[i] = markers[i][0];
    lat[i] = markers[i][1];
    lng[i] = markers[i][2];
    text[i] = markers[i][3];
 }
 initialize(setno, title, lat, lng, text);
 });
 });
 function initialize (setno, title, lat, lng, text) {

 var bodyHeight=$('body').height();
 $("#map").css('height', bodyHeight);

  varmyOptions={
      zoom:16,
      center: new google.maps.LatLng (35.6954806, 139.76325010000005),
      mapTypeId—Google.maps.MapTypeId.ROADMAP
  };
  varmap = new google.maps.Map( document.getElementById("map"), myOptions);
  for (vari=0;i<markers.length;i++) {
      var name = title [i];
      var latlng = new google.maps.LatLng(lat[i], lng[i]);
      var comment=text[i];
      createMarker(name, latlng, comment, map);
  }
  }
  function createMarker(name,latlng,comment,map){
  var infoWindow = new google.maps.InfoWindow({
  });
  varmarker = new google.maps.Marker({
      position:latlng,
      map —map
  });
  Google.maps.event.addListener(marker, 'click', function(){
      if(currentWindow){
          currentWindow.close();
      }
      infoWindow.setContent(
        '<div class="infoWindow">'+
        '<h2>'+name+'</h2>'+
        '<p>'+comment+'</p>'+
        '</div>'
      );
      infoWindow.open(map,marker);
      currentWindow=infoWindow;
   });
   }
   google.maps.event.addDomListener(window, 'load', initialize);

   </script>
   </head>

   <body onload="initialize()">
   <div data-role="page"id="top">
   <div data-role="header">
    <h1>DEMO</h1>
   </div>
   <div role="main" class="ui-content">
   <a href="#sub" data-rel="dialog" data-transition="slidedown">View dialog&raquo;/a>
   <divid="map"></div>
   </div>

   <div data-role="footer">
   <h1>DEMO</h1>
   </div>
   </div>

   <div data-role="page" id="sub" data-close-btn="right">
   <div data-role="header">
    <h1>Title </h1>
   </div>
   <div data-role="main" class="ui-content">
   <p>Comments begin here</p>
    <a href="#"data-role="button"data-rel="back">Close</a>
   </div>
   </div>
   </body>

   <style type="text/css">
   #map{
   width: 100%;
   height —auto;
   }

   # infoWindow {
   width —300px;
   height —400px;
   }
   </style>

maps.json

[
  ["TAM Tokyo", "35.6954806", "139.76325010000005", "Comment A",
  ["Ogawacho Station", "35.6951212", "139.76610649999998", "Comment B",
  ["Awajimachi Station", "35.69496", "139.76746000000003", "Comment C",]
  ["Ochanomizu Station", "35.6993529", "139.765269999993", "Comment D",
  ["Jinbo-cho Station", "35.695932", "139.757626999996", "Comment E"],
  ["Shin-Ochanomizu Station", "35.696932", "139.76543200000003", "Comment F"]
]

javascript google-maps

2022-09-30 15:39

1 Answers

initialize is running too much.

in the script google.maps.event.addDomListener (window, 'load', initialize);
and
in HTML <body onload="initialize()">
onload="initialize()" is not required; initialize will generate a markerless map if executed without arguments.
Once you get the maps.json, you only need to run it once.

In addition, the initialize function itself has a bug.The loop condition of the for statement refers to markers.length, which is undefined in this function.I have passed the length of the array to the argument setno, so please use it.

2022-09-30 15:39

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656