I've been reading through several articles on what I'm wanting to do although it seems that I may be in a unique predicament in that there's very little, if none, documentation on combining various features. That or I'm dense which isn't all that unlikely, haha.
For starters... With the help of William here at this forum I was able to complete the brunt of my project which can be read here: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/5988e56946acad5e/b77e97ccb37989f0#b77e97ccb37989f0 Which helped me to implement a Google Map of my fave game: http://www.google.com/url?sa=D&q=http://www.sacredwiki.org/index.php5/Sacred_2:Map_of_Ancaria Now that the map is embeded there are two groups of markers I want to place on the map. 89 markers which will be part of an "Employees" group and another 30 markers which will be part of a "Bosses" group. What I first need is a means to find out the numerical coord of the points I wish to place the markers. For that I have been trying to use "Draggable Markers" from the Google Maps V3 API Demo Gallery. To no avail... http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html I desperately need help understanding how to code this. I've tried so many variations of code and nothing I do will display both my custom tiles map AND the drag-able marker. Any advice would be so very much appreciated. Ii have next to no experience with javascript and I'm having a heck of a time wrapping my head around it. Below is my TestMap.html and the code contained within the html: http://www.darkmatters.org/forums/bradstuff/Map/TestMap.html <html> <head> <title>Google Maps JavaScript API v3 Example: Image MapTypes</title> <link href="standard.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js? sensor=false"></script> <script> var geocoder = new google.maps.Geocoder(); function geocodePosition(pos) { geocoder.geocode({ latLng: pos }, function(responses) { if (responses && responses.length > 0) { updateMarkerAddress(responses[0].formatted_address); } else { updateMarkerAddress('Cannot determine address at this location.'); } }); } function updateMarkerStatus(str) { document.getElementById('markerStatus').innerHTML = str; } function updateMarkerPosition(latLng) { document.getElementById('info').innerHTML = [ latLng.lat(), latLng.lng() ].join(', '); } function updateMarkerAddress(str) { document.getElementById('address').innerHTML = str; } var marker = new google.maps.Marker({ position: myLatlng, title: 'Point A', map: mymap, draggable: true }); var myLatlng = new google.maps.LatLng(75, -115); var mymap = new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { return "http://www.darkmatters.org/forums/bradstuff/Map/ MainMap/"+zoom+"_"+coord.x+"_"+coord.y+".jpg"; }, tileSize: new google.maps.Size(256, 256), isPng: false }); var map; function initialize() { map = new google.maps.Map(document.getElementById("map_canvas")); map.setCenter(new google.maps.LatLng(75, -115)); map.setZoom(2); map.setMapTypeId('roadmap'); map.overlayMapTypes.insertAt(0, mymap); } // Onload handler to fire off the app. google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <style> #map_canvas { width: 1000px; height: 900px; float: left; } #infoPanel { float: left; margin-left: 10px; } #infoPanel div { margin-bottom: 5px; } </style> <div id="map_canvas"></div> <div id="infoPanel"> <b>Marker status:</b> <div id="markerStatus"><i>Click and drag the marker.</i></div> <b>Current position:</b> <div id="info"></div> <b>Closest matching address:</b> <div id="address"></div> </div> </body> </html> -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
