谷歌地圖標記彈出Jquery

我想創建一個彈出窗口與jquery標記，我想要的。所以我有一個標記的代碼，但如何創建另一個標記的另一個彈出窗口？以巴黎爲例。而且我也想知道如何防止彈出窗口移動？谷歌地圖標記彈出Jquery

<script type='text/javascript'> $(function(){function initialize() { 
    var mapOptions = { 
     zoom: 4, 
     disableDefaultUI: true, 
     center: new google.maps.LatLng(45.35, 4.98), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 
    var map = new google.maps.Map(document.getElementById('map_canvas'), 
            mapOptions); 


// Paris 
var Paris = new google.maps.LatLng(48.856291,2.352705); 
    var image = 'rss.png'; 
    var marker = new google.maps.Marker({ 
     position: Paris, 
     map: map, 
     icon: image, 
    }); 


// Le Mans 
var Lemans = new google.maps.LatLng(48.006922,0.20874); 
    var image = 'rss.png'; 
    var marker = new google.maps.Marker({ 
     position: Lemans, 
     map: map, 
     icon: image, 
    }); 

    var styles = [ 
    { 
     featureType: "all", 
     stylers: [ 
     { saturation: -15 }, 
     { lightness: -10 }, 
     ] 
    }, 

      ]; 
map.setOptions({styles: styles}); 


var popup=$('<div/>', { 
    'id':'infoWindow', 
    'text':'Hello World' 
}).dialog({ 
    'autoOpen':false, 
    'width': 200, 
    'height':200, 
    'resizable':false, 
    'modal':true, 
    'title':'Map info' 
}); 
google.maps.event.addListener(marker, 'click', function(e) { 
    console.log(e); 
    popup.dialog('open'); 
}); }initialize();}); </script>

來源

2013-02-01 Mickael Dll

您可以提取標記物 - 和窗口創建於額外的功能，併爲每個城市打電話。順便說一下，我用谷歌地圖窗口替換了彈出窗口。但是這也應該適用於自定義彈出窗口。

function addMarkerWithWindow(name, coordinate, map) { 
    var infowindow = new google.maps.InfoWindow({ 
     content: name 
    }); 

    var marker = new google.maps.Marker({ 
     map: map, 
     position: coordinate 
    }); 

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

function initialize() { 
    var mapDiv = document.getElementById('map-canvas'); 
    var map = new google.maps.Map(mapDiv, { 
     center: new google.maps.LatLng(48.006922, 2.20874), 
     zoom: 4, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    addMarkerWithWindow("This is Lemans", new google.maps.LatLng(48.006922, 0.20874), map); 
    addMarkerWithWindow("This is Paris", new google.maps.LatLng(48.856291, 2.352705), map); 
}

您可以測試代碼，如果你把它放在這裏：http://code.google.com/apis/ajax/playground/#info_windows_complex_v3

來源

2013-02-01 16:43:46

謝謝你的腳本完美的作品！但是，我不明白它是如何爲每個標記放置不同的文本？ –

addMarkerWithWindow函數的第一個參數填充放置在InfoWindow的'content'選項中的name變量。你也可以在那裏粘貼HTML。 –

-1

創建一個彈出窗口，你可以做這樣的事：

你可以檢查一些例子在這裏：Demos

<p><a href="http://www.yahoo.com" title="yahoo.com" class="example1demo">open popup</a></p> 
<script type="text/javascript"> 
$('.example1demo').popupWindow({ 
height:500, 
width:800, 
top:50, 
left:50 
}); 
</script>

來源

2013-02-01 16:06:50 Severiano

谷歌地圖標記彈出Jquery

回答

相關問題