在Google地图中标记多个位置

Question

I am trying to mark several locations on maps which I am fetching from Database through a php code : 我正在尝试在地图上标记几个位置，这些位置是通过php代码从数据库中获取的：

PHP Code: PHP代码：

<?php error_reporting(0);

 $con = mysql_connect('localhost','root','');
$db = mysql_select_db('easydoes');

$query = mysql_query('SELECT city,latitude,longitude FROM zip_codes LIMIT 0 , 30');



while($row = mysql_fetch_assoc($query))
{
    $val[]=$row;
}

echo json_encode($val);

?>

HTML Code HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
<script>
var obj;
$(document).ready(function(){
  $.post("markers.php",{},function(data){
    obj=JSON.parse(data);
    //alert(obj[0].city);
    initialize(obj);
  });

});
</script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js">
    </script>
    <script>
function initialize() {
var markers = [];
for(var i=0;i<obj.length;i++)
{
  var myLatlng = new google.maps.LatLng( obj[i].latitude, obj[i].longitude);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: obj[i].city
  });
   markers.push(marker);
}
markerClusterer = new MarkerClusterer(map, markers, {
          maxZoom: 12,
          gridSize: 40,
          styles: "Default"
        });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Where am I going wrong ? 我要去哪里错了？ I am pretty new to Jquery and Java Script . 我对Jquery和Java Script非常陌生。

Answer 1

You should remove the following line: 您应该删除以下行：

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

and put it outside the for loop. 并将其放在for循环之外。

If this doesn't work, please paste the console log in order to see what is failing. 如果这不起作用，请粘贴控制台日志以查看失败的原因。

Edit: Try this: 编辑：试试这个：

var myLat = 'lat.to.center.your.map';
var myLong = 'long.to.center.your.map';
var myLatlng= new google.maps.LatLng( myLat, myLong);
var mapOptions = {
    zoom: 4,
    center: myLatlng
}

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

for(var i=0;i<obj.length;i++)
{
    var poiLatLang = new google.maps.LatLng( obj[i].latitude, obj[i].longitude);

    var marker = new google.maps.Marker({
        position: poiLatLang ,
        map: map,
        title: obj[i].city
    });
    markers.push(marker);
}

You where always defining a new map, with new options and a new center. 您总是在定义新地图，新选项和新中心。 Try this out in order to see if it works. 尝试一下，看看是否可行。 The vars myLat and myLong should be the latitude and longitude where you want your map to be centered a the begining. vars myLat和myLong应该是您希望地图以开始为中心的经度和纬度。

EDIT 2 编辑2

Checking at the log you have posted in your comment, I now see that the url you are loading from google is wrong, you are missing the apiKey and secretKey, Check out the following link in order to solve this: 查看您发表在评论中的日志，现在我发现您从google加载的网址是错误的，缺少apiKey和secretKey，请查看以下链接以解决此问题：

https://developers.google.com/maps/documentation/javascript/tutorial#api_key https://developers.google.com/maps/documentation/javascript/tutorial#api_key

Nevertheless, the modifications in my first edit, you will have to apply them in order to make it work correctly. 不过，在我的第一次编辑中，您必须应用这些修改才能使其正常工作。

在Google地图中标记多个位置

问题描述

1 个解决方案

解决方案1
1 2013-12-02 19:59:18

EDIT 2 编辑2

在Google地图中标记多个位置

问题描述

1 个解决方案

解决方案1 1 2013-12-02 19:59:18

EDIT 2 编辑2

解决方案1
1 2013-12-02 19:59:18