admin管理员组文章数量:1201569
I'm looking to add markers for each business listed to a Google map v3 API on this page in the top right hand corner.
I'm not sure how to do this for multiple postcodes, but the one we currently use on the individual business pages use a URLencode for the dynamic postcodes stored in the database.
Here's the code we use for the individual pages:
<script src=";key=AIzaSyBaPEDyFbbnWjtvT8W3UBOM34Y7g6vK69A&sensor=false"></script>
var map;
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.511214,-0.119824),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var geolocate = function(address, callback) {
$.ajax({
url: "",
data: {
"sensor": true,
"address": address
},
dataType: "json",
success: function(d) {
if (d.status == "ZERO_RESULTS") callback(false);
if (d.results && d.results[0] && d.results[0].geometry) {
callback({
"ne": d.results[0].geometry.bounds.northeast,
"sw": d.results[0].geometry.bounds.southwest,
"center": d.results[0].geometry.location
});
}
else callback(false);
}
});
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
geolocate("<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>", function(c) {
map.setCenter(new google.maps.LatLng(c.center.lat, c.center.lng));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$('#myModal').on('shown', function () {
google.maps.event.trigger(map, 'resize');
})
The postcodes for that page are generated in ASP:
if rsDB_Ads("ContactPostcode") <> "" then
strTempHTML = "[ContactPostcode]"
strDB_AdvertItem = Replace(strDB_AdvertItem, "<!--ContactPostcode-->", strTempHTML)
Else
strDB_AdvertItem = Replace(strDB_AdvertItem, "<!--ContactPostcode-->", "")
End if
Hoping someone can help..
I'm looking to add markers for each business listed to a Google map v3 API on this page in the top right hand corner.
I'm not sure how to do this for multiple postcodes, but the one we currently use on the individual business pages use a URLencode for the dynamic postcodes stored in the database.
Here's the code we use for the individual pages:
<script src="http://maps.googleapis.com/maps/api/js?q=London&key=AIzaSyBaPEDyFbbnWjtvT8W3UBOM34Y7g6vK69A&sensor=false"></script>
var map;
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.511214,-0.119824),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var geolocate = function(address, callback) {
$.ajax({
url: "http://maps.googleapis.com/maps/api/geocode/json",
data: {
"sensor": true,
"address": address
},
dataType: "json",
success: function(d) {
if (d.status == "ZERO_RESULTS") callback(false);
if (d.results && d.results[0] && d.results[0].geometry) {
callback({
"ne": d.results[0].geometry.bounds.northeast,
"sw": d.results[0].geometry.bounds.southwest,
"center": d.results[0].geometry.location
});
}
else callback(false);
}
});
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
geolocate("<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>", function(c) {
map.setCenter(new google.maps.LatLng(c.center.lat, c.center.lng));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$('#myModal').on('shown', function () {
google.maps.event.trigger(map, 'resize');
})
The postcodes for that page are generated in ASP:
if rsDB_Ads("ContactPostcode") <> "" then
strTempHTML = "[ContactPostcode]"
strDB_AdvertItem = Replace(strDB_AdvertItem, "<!--ContactPostcode-->", strTempHTML)
Else
strDB_AdvertItem = Replace(strDB_AdvertItem, "<!--ContactPostcode-->", "")
End if
Hoping someone can help..
Share Improve this question edited May 15, 2013 at 15:22 asked May 15, 2013 at 0:10 user2367386user23673862 Answers
Reset to default 20Just for a start, here is how to manage multiple markers. (copy & Paste the code into a html file and it works ...) You can then adapt the code by writing out the locations from a db etc. via classic asp:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 1000px; height: 1000px;"></div>
<script type="text/javascript">
var locations = [
['Stadtbibliothek Zanklhof', 47.06976, 15.43154, 1],
['Stadtbibliothek dieMediathek', 47.06975, 15.43116, 2],
['Stadtbibliothek Gösting', 47.09399, 15.40548, 3],
['Stadtbibliothek Graz West', 47.06993, 15.40727, 4],
['Stadtbibliothek Graz Ost', 47.06934, 15.45888, 5],
['Stadtbibliothek Graz Süd', 47.04572, 15.43234, 6],
['Stadtbibliothek Graz Nord', 47.08350, 15.43212, 7],
['Stadtbibliothek Andritz', 47.10280, 15.42137, 8]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(47.071876, 15.441456),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
I see my code in this!
I am assuming that you want markers to be added on the map. This can be easily done by tweaking the code I supplied before. Quite simply:
geolocate("Your postcode here", function(c) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(c.center.lat, c.center.lng),
map: map,
// Your other google maps marker options here
});
});
Just duplicate this code as many times as necessary by printing it using ASP, making sure that map and geolocate are both within the scope. Each time, it will simply add your marker!
本文标签： javascriptAdding multiple markers to Google MapStack Overflow
版权声明：本文标题：javascript - Adding multiple markers to Google Map - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738585587a2101411.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论