[英]google map multiple marker with json
How to make multiple marker in google map, using json data.如何使用 json 数据在谷歌地图中制作多个标记。 i have tried with single marker it is working but no with multiple marker.
我试过使用单个标记它可以工作,但没有使用多个标记。
Here is the code for single Marker (IT IS WORKING)这是单个标记的代码(它正在运行)
var lat=position.coords.latitude;
var lang=position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat,lang);
var myMapOptions = {
zoom: 12
,center: myLatlng
,mapTypeId: google.maps.MapTypeId.HYBRID
};
var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
var image = "images/tag.png"; //IMAGE TAG
var marker = new google.maps.Marker({
map: theMap,
draggable: false,
position: new google.maps.LatLng(lat,lang),
visible: true,
icon: image,
title:restaurantName // Title
});
var myOptions = {
content: ""
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, -110)
,pixelOffset: new google.maps.Size(140, 110)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.90
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
This is to make a description when marker is clicked这是在点击标记时进行描述
var contentString = '<div class="map_anotaion_title">Description</div>'; //Address on pin click
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(theMap,marker);
google.maps.event.addListener(marker, "click", function (e) {
infowindow.open(theMap,marker);
});
Here is the code i trying with Multiple Marker Load from JSON ( IT IS NOT WORKING)这是我尝试使用来自 JSON 的多标记加载的代码(它不起作用)
var lat=position.coords.latitude;
var lang=position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat,lang);
var myMapOptions = {
zoom: 12
,center: myLatlng
,mapTypeId: google.maps.MapTypeId.HYBRID
};
var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
var image = "images/tag.png";
$.getJSON('http://myweb.com/services/get_loc_komp.php', function(json1) {
$.each(json1, function(key, data) {
var marker = new google.maps.Marker({
map: theMap,
draggable: false,
position: new google.maps.LatLng(data.latd,data.lotd),
visible: true,
icon: image,
title:data.street // Title
});
});
});
var myOptions = {
content: ""
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, -110)
,pixelOffset: new google.maps.Size(140, 110)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.90
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var contentString = '<div class="map_anotaion_title">Description</div>'; //Address on pin click
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(theMap,marker);
google.maps.event.addListener(marker, "click", function (e) {
infowindow.open(theMap,marker);
});
Pls help me anybody请帮助我任何人
thank you very much非常感谢您
its working now, thank you @terry它现在工作,谢谢@terry
this is my code :这是我的代码:
$.getJSON('http://myweb.com/services/get_loc_komp.php', function(data) {
all_address = data.items;
$.each(all_address, function(index, adress) {
var marker = new google.maps.Marker({
map: theMap,
draggable: false,
position: new google.maps.LatLng(adress.latd,adress.lotd),
visible: true,
icon: image,
title:adress.street // Title
});
var contentString="";
var infowindow="";
var contentString = '<div class="map_anotaion_title">'+adress.street+'</div>'; //Address on pin click
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(theMap,marker);
google.maps.event.addListener(marker, "click", function (e) {
infowindow.open(theMap,marker);
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.