Google 地图在网页上的视图

Question

我从未做过 Google Map 使用 Google Map API 的数据库驱动地址集成。我有此功能的代码，但没有在网络上获得预期的视图 page.I 想想，对于以前处理过 Google 地图 API 的人来说，这是一个非常简单的问题。

请注意，我在 google 开发者网站上研究了几个小时，SO 和其他 blogs.But 没有成功，因为我不确定是什么因素导致了这个问题。

This view is what I am getting,

而且，预期的视图是

这是代码

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript">   </script>
 <script type="text/javascript">
 //Sample code written by August Li
  var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
  new google.maps.Size(32, 32), new google.maps.Point(0,0),
  new google.maps.Point(16, 32));
  var center = null;
  var map = null;
  var currentPopup;
  var bounds = new google.maps.LatLngBounds();
  function addMarker(lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  bounds.extend(pt);
  var marker = new google.maps.Marker({
  position: pt,
  icon: icon,
  map: map
  });
  var popup = new google.maps.InfoWindow({
  content: info,
  maxWidth: 300

  });
  google.maps.event.addListener(marker, "click", function() {
    if (currentPopup != null) {
      currentPopup.close();
      currentPopup = null;
    }
  popup.open(map, marker);
  currentPopup = popup;
  });
  google.maps.event.addListener(popup, "closeclick", function() {
  map.panTo(center);

  currentPopup = null;
  });
  }
  function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
  //map.panBy(0,30);
   //map.setZoom(15);

  center: new google.maps.LatLng(0,0),
  zoom: 14,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  },
  navigationControl: true,
  navigationControlOptions: {
  style: google.maps.NavigationControlStyle.SMALL
  }
  });
  <?php
   if(isset($_GET['user_map'])){
     $mapusrx=$_GET['user_map'];

     $query = mysqli_query($connecti,"SELECT * FROM map WHERE user_id='$mapusrx'");
       while ($row = mysqli_fetch_assoc($query)){
         $name=$row['title'];
         $lat=$row['lat'];
         $lon=$row['lon'];
         $desc=$row['address'];
         echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
        }
    }
  ?>
  center = bounds.getCenter();
  map.fitBounds(bounds);

  }

CSS

#map { 
width: 240px; 
height: 700px; 
border: 0px;
padding: 0px;
position:absolute;
top:0px;
right:0px;
}

非常感谢您的帮助。

Answer 1

也许你可以尝试减少 Zoom:14级

Answer 2

使用此代码，

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript">   </script>
 <script type="text/javascript">
 //Sample code written by August Li
  var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
  new google.maps.Size(240, 700), new google.maps.Point(0,0),
  new google.maps.Point(16, 32));
  var center = null;
  var map = null;
  var currentPopup;
  var bounds = new google.maps.LatLngBounds();
  function addMarker(lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  bounds.extend(pt);
  var marker = new google.maps.Marker({
  position: pt,
  icon: icon,
  map: map
  });
  var popup = new google.maps.InfoWindow({
  content: info,
  maxWidth: 300

  });
  google.maps.event.addListener(marker, "click", function() {
    if (currentPopup != null) {
      currentPopup.close();
      currentPopup = null;
    }
  popup.open(map, marker);
  currentPopup = popup;
  });
  google.maps.event.addListener(popup, "closeclick", function() {
  map.panTo(center);

  currentPopup = null;
  });
  }
  function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
  //map.panBy(0,30);
   //map.setZoom(15);

  center: new google.maps.LatLng(0,0),
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  },
  navigationControl: true,
  navigationControlOptions: {
  style: google.maps.NavigationControlStyle.SMALL
  }
  });
  <?php
   if(isset($_GET['user_map'])){
     $mapusrx=$_GET['user_map'];

     $query = mysqli_query($connecti,"SELECT * FROM map WHERE user_id='$mapusrx'");
       while ($row = mysqli_fetch_assoc($query)){
         $name=$row['title'];
         $lat=$row['lat'];
         $lon=$row['lon'];
         $desc=$row['address'];
         echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
        }
    }
  ?>
  center = bounds.getCenter();
  map.fitBounds(bounds);

  }


**CSS**

#map { 
width: 240px; 
height: 700px; 
border: 0px;
padding: 0px;
position:absolute;
top:0px;
right:0px;
}

Answer 3

特别感谢 Barryhunter，他解决了问题@Google 地图论坛

只需要使用下面的代码，在<?php ?> block

之后

center = bounds.getCenter();
map.setCenter(center);
map.setZoom(15);

Changing setZoom() value will give desired view on the map.

Google 地图在网页上的视图

Google Map's view on webpage

javascript

mysql

google-maps