|
P: 33
|
i have a google maps api on my website, where when you click it grabs the lat/long coordinates and works well for me, but i would for a visual reference like to see a marker added to the place where i clicked do i know exactly where it is.. and i\'ve tried many different configurations.. any ideas? - <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
-
<script type="text/javascript">
-
var geocoder;
-
var map;
-
-
function initialize(){
-
var latlng = new google.maps.LatLng(36.879,-96.537);
-
var myOptions = {
-
zoom: 3,
-
center: latlng,
-
mapTypeId: google.maps.MapTypeId.HYBRID,
-
scaleControl: true,
-
navigationControl: true,
-
navigationControlOptions:{
-
style: google.maps.NavigationControlStyle.SMALL
-
},
-
mapTypeControl: true,
-
mapTypeControlOptions:{
-
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
-
}
-
};
-
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
-
google.maps.event.addListener(map, 'mousedown', function(event){
-
findAddress(event.latLng);
-
});
-
}
-
function findAddress(loc){
-
geocoder = new google.maps.Geocoder();
-
if (geocoder){
-
geocoder.geocode({'latLng': loc}, function(results, status){
-
if (status == google.maps.GeocoderStatus.OK){
-
if (results[0]){
-
address = results[0].formatted_address;
-
document.getElementById('lat').value = loc.lat();
-
document.getElementById('long').value = loc.lng();
-
}
-
}else{
-
alert("Geocoder failed due to: " + status);
-
}
-
});
-
}
-
}
-
var markers = new Array();
-
function addMarkers(){
-
var lats = document.getElementById('lats').value;
-
var lngs = document.getElementById('lngs').value;
-
var names = document.getElementById('names').value;
-
var descrs = document.getElementById('descrs').value;
-
var memid = document.getElementById('memid').value;
-
-
var las = lats.split(";;")
-
var lgs = lngs.split(";;")
-
var dss = descrs.split(";;")
-
var usrn = memid.split(";;")
-
-
for (i=0; i<las.length; i++){
-
if (las[i] != ""){
-
var loc = new google.maps.LatLng(las[i],lgs[i]);
-
var marker = new google.maps.Marker({
-
position: loc,
-
map: window.map,
-
title: nms[i]
-
});
-
markers[i] = marker;
-
var contentString = [
-
'<div id="tabs">',
-
'<ul>',
-
'<li><a href="#tab-2"><span>description</span></a></li>',
-
'<li><a href="#tab-3"><span>location</span></a></li>',
-
'</ul>',
-
'<div id="tab-1">',
-
'<p><h1>'+nms[i]+'</h1></p>',
-
'</div>',
-
'<div id="tab-2">',
-
'<p><h1>'+nms[i]+'</h1></p>',
-
'<p>Added by: '+usrn[i]+' from '+usrl[i]+'</p>'+
-
'<p>'+dss[i]+'</p>'+
-
'</div>',
-
'<div id="tab-3">',
-
'<p><h1>'+nms[i]+'</h1></p>',
-
'</div>',
-
'</div>'
-
].join('');
-
var infowindow = new google.maps.InfoWindow;
-
bindInfoWindow(marker, window.map, infowindow, contentString);
-
}
-
}
-
}
-
function bindInfoWindow(marker, map, infoWindow, contentString){
-
google.maps.event.addListener(marker, 'mouseover', function() {
-
map.setCenter(marker.getPosition());
-
infoWindow.setContent(contentString);
-
infoWindow.open(map, marker);
-
$("#tabs").tabs();
-
});
-
}
-
function highlightMarker(index){
-
for (i=0; i<markers.length; i++){
-
if (i == index){
-
markers[i].setZIndex(10);
-
markers[i].setIcon('http://www.google.com/mapfiles/arrow.png');
-
}else{
-
markers[i].setZIndex(2);
-
markers[i].setIcon('http://www.google.com/mapfiles/marker.png');
-
}
-
}
-
}
-
</script>
-
you see at the end i have a markers function with locations to the pics and still nothing.. thanks for any help gt
| |
