1.引入Google Maps的外部Javascript文件:
1 <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
2.引入JQuery文件:
1 <script src="js/jquery-1.6.3.min.js"></script>
2 <script src="js/jquery.gomap-1.3.2.min.js"></script>
3.在网页中加入<div>对,作为Maps的容器:
1 <div id="map">
2
3 </div>
并通过CSS设置其大小等属性:
1 #map{
2 width: 760px;
3 height: 400px;
4 }
4.调用goMap插件的goMap()函数:
1 $(document).ready(function() {
2 $('#map').goMap();
3 });
接下来就是一些设置地图center point之类的事了,使用latitude和longitude来设置当前地图所指向的区域:
1 $(document).ready(function() {
2 $('#map').goMap({
3 latitude : 45.53940,
4 longitude : -122.59025
5 }); // end goMap
6 }); // end ready
1 $('#map').goMap({
2 address : '某某地址'
3 }); // end goMap
也可以设定缩放级别:
1 $('map').goMap({
2 zoom:15
3 });
一些常用的设置选项:
maptype: 'TERRAIN'
scaleControl : true
navigationControl : false
navigationControl: false
scrollwheel: false
disableDoubleClickZoom: true
mapTypeControl : false
...
5.增加标记(Marker):
1 $('#map').goMap({
2 markers : [
3 {
4 latitude : 45.53940,
5 longitude : -122.59025,
6 title : 'Marker 1'
7 }
8 ]
9 }); // end goMap
如果你想动态的添加标记,则可以使用如下方法:
1 $.goMap.createMarker({
2 latitude : 45.53940,
3 longitude : -122.59025,
4 title : 'Marker 1'
5 });
相反的使用:$.goMap.clearMarkers()或者
$.goMap.removeMarker('marker1') 来去掉标记。