谷歌地圖和活動場所

我在我的網站的一些事件對於用戶這些事件有一個位置我想提出一個谷歌地圖爲這是我的代碼谷歌地圖和活動場所

<!DOCTYPE html> 
<html> 
<head> 
<script 
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> 
</script> 

<script> 

var myCenter = new google.maps.LatLng(51.508742, -0.120850); 

function initialize() { 
    var mapProp = { 
     center: myCenter, 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
    var marker = new google.maps.Marker({ 
     position: myCenter, 
    }); 
    marker.setMap(map); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

</head> 

<body> 
<div id="googleMap" style="width:500px;height:380px;"></div> 
</body> 
</html>

但我有2問題

第一個問題是：我如何設置地圖專注於沙特阿拉伯第二個問題是：如果我們在某個地方有事件我怎麼把地圖放在地圖上？

來源

2013-04-07 mnora_h

關於如何做到這一點的大量信息：https：//developers.google.com/maps/documentation/ – seanbreeden 2013-04-07 22:41:19

這裏是JavaScript（說的script.js文件）將在地圖上標記的事件（你的情況）：

var map = false; 
var markers = []; 

(function() { 
    var s = document.createElement('script'); 
    s.type = 'text/javascript'; 
    s.src = 'http://maps.googleapis.com/maps/api/js?key=AIzaSyDualhHxdg8nNCo4xY6gIfedyaHffW99UI&libraries=geometry,places&sensor=false&callback=initialize'; 
    document.body.appendChild(s); 

})(); 


function initialize() { 

    var geocoder = false; 

    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     mapTypeId: 'grayscale', 
     scrollwheel: false, 
     overviewMapControl: false, 
     panControl: false, 
     rotateControlOptions: false, 
     streetViewControl: false, 
     mapTypeControl: false 
    }); 

    map.mapTypes.set("grayscale", new google.maps.StyledMapType([{ 
     featureType: 'all', 
     elementType: 'all', 
     stylers: [{ 
      saturation: -80 
     }] 
    }], { 
     name: 'Grey Scale' 
    })); 


    geocoder = new google.maps.Geocoder(); 

    geocoder.geocode({ 
     address: 'Saudi Arabia' 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 

      //this get the longitude and latitude of the saudi arabia 
      var center = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()); 




      //this focuses on the saudi arabia 
      map.setCenter(center); 


      // Get the coordinates of the center of the map 
      var center = map.getCenter(); 



      google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 

      //ajax to get event location with longitude and latitude from database 
       xhr = $.ajax({ 
        url: '/joey/event', 
        data: { 
         param:"your param" 
        }, 
        dataType: 'json', 
        success: function (data) { 

         //then run loop over json data to add the markers on the map for the events 
         //code in loop start 

         // Here you can put the latitude and longtitude associated with event 
         var center = new google.maps.LatLng(latitude, longitude); 


         var event = new google.maps.Marker({ 
          map: map, 
          title: "event name", 
          zIndex: 10000, 
          icon: 'event-icon.png', 
          position: new google.maps.LatLng(jlat, jlng) 
         }); 
         markers.push(event); 
         //code in loop end 

        } 
       }); 
      }); 
     } 
    }); 



}

在HTML頁面簡單地說：

<div id="map"></div> 
    <script type="text/javascript" src="script.js" defer></script>

我希望這可以對你有所幫助。

來源

2013-06-12 10:12:30

谷歌地圖和活動場所

回答

相關問題