在Google地图上放置标记

时间:2018-08-07 15:30:19

标签: javascript html google-maps

我正在尝试在网站上并排放置的两个单独的地图上放置两个单独的标记。

<script type="text/javascript">
var map, map2;

function initialize(condition) {
// create the maps
var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(35.594700, -105.221787),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var myOptions1 = {
    zoom: 14,
    center: new google.maps.LatLng(35.104441, -106.575394),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}


map2 = new google.maps.Map(document.getElementById("map_canvas2"), 
myOptions1);
}
</script> 

2 个答案:

答案 0 :(得分:0)

该代码本身不会在地图上放置任何标记,只会渲染地图,每个地图都以您指定的纬度/经度为中心。

请看https://developers.google.com/maps/documentation/javascript/markers上的第一个示例,以了解如何在每个地图上添加标记。

答案 1 :(得分:0)

您可以为此创建一个simple maker

只需将其放在您的代码中map = new Google.maps.Map(document.getElementById("map_canvas"), myOptions);之后:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(35.594700, -105.221787),
    map: map,
    title: 'Marker 1'
});

map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions1);之后:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(35.104441, -106.575394),
    map: map2,
    title: 'Marker 2'
});

示例

您的代码应如下所示:

<script type="text/javascript">
var map, map2;

function initialize(condition) {
// create the maps
var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(35.594700, -105.221787),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(35.594700, -105.221787),
    map: map,
    title: 'Marker 1'
});

var myOptions1 = {
    zoom: 14,
    center: new google.maps.LatLng(35.104441, -106.575394),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}


map2 = new google.maps.Map(document.getElementById("map_canvas2"), 
myOptions1);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(35.104441, -106.575394),
    map: map2,
    title: 'Marker 2'
});

}
</script>