2013-02-16 77 views
2

我发现这个谷歌地图的代码似乎工作正常,但是,当我加载地图时,初始标记没有显示出来。地图集中在初始位置,但没有标记。我使用PHP来填充最初的经纬度和经度。还有一种方法可以在拖动到新位置时移除旧标记吗?谷歌地图初始标记不会显示

// global "map" variable 
     var map = null; 
     var marker = null; 

     // popup window for pin, if in use 
     var infowindow = new google.maps.InfoWindow({ 
      size: new google.maps.Size(150,50) 
      }); 

     // A function to create the marker and set up the event window function 
     function createMarker(latlng, name, html) { 

     var contentString = html; 

     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      zIndex: Math.round(latlng.lat()*-100000)<<5 
      }); 

     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(contentString); 
      infowindow.open(map,marker); 
      }); 

     google.maps.event.trigger(marker, 'click');  
     return marker; 

    } 

    function initialize() { 

     // the location of the initial pin 
     var myLatlng = new google.maps.LatLng(<?=$a1[lat]?>,<?=$a1[lon]?>); 

     // create the map 
     var myOptions = { 
      zoom: 12, 
      center: myLatlng, 
      mapTypeControl: true, 
      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
      navigationControl: true, 
      mapTypeId: google.maps.MapTypeId.SATELLITE 
     } 
    var myMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(<?=$a1[lat]?>, <?=$a1[lon]?>), 
     draggable: true 
    }); 

     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     // establish the initial marker/pin 
     var myMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(<?=$a1[lat]?>, <?=$a1[lon]?>), 
     draggable: true 
    }); 

     // establish the initial div form fields 
     formlat = document.getElementById("latbox").value = myLatlng.lat(); 
     formlng = document.getElementById("lngbox").value = myLatlng.lng(); 

     // close popup window 
     google.maps.event.addListener(map, 'click', function() { 
      infowindow.close(); 
      }); 

     // removing old markers/pins 
     google.maps.event.addListener(map, 'click', function(event) { 
      //call function to create marker 
      if (marker) { 
       marker.setMap(null); 
       marker = null; 
      } 

      // Information for popup window if you so chose to have one 

      marker = createMarker(event.latLng, "name", "<font color=#660000><b><?=$a1[name]?></b><br>"+event.latLng); 


      var image = '/images/googlepins/pin2.png'; 
      var myLatLng = event.latLng ; 

      /* 
      var marker = new google.maps.Marker({ 
       by removing the 'var' subsquent pin placement removes the old pin icon 
      */ 

      marker = new google.maps.Marker({ 
       position: myLatLng, 
       map: map, 
       icon: image, 
       title:"Property Location" 
      }); 

      // populate the form fields with lat & lng 
      formlat = document.getElementById("latbox").value = event.latLng.lat(); 
      formlng = document.getElementById("lngbox").value = event.latLng.lng(); 

     }); 

    } 
    //]]> 

回答

3

需要添加Map-Tag。我有人试图帮助我,但是当他的回答产生更多问题时,他删除了他的答案,然后下了投票我的问题....感谢Buddy ..这是Map-Option需要去的地方。

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     // establish the initial marker/pin 
     var myMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(<?=$a1[lat]?>, <?=$a1[lon]?>), 
     map: map, /// <-------This is what I added and seems to have fixed my problem 
     draggable: true, 

    });