Search the Community

I hate javascript and working with Google maps but, anyways. I am trying to update my old maps to a new style. Here is the new style. http://www.mesquiteweather.net/lsm/map.html I am trying to added the markers to the map from an XML file which is this one. http://www.mesquiteweather.net/tracker/data.xml It should look like this. http://www.mesquiteweather.net/wxspotter.php I have transferred the code over to the updated map style but, for some reason it isn't displaying the markers. Can someone please tell me what it is I am missing or doing wrong which I am sure is a lot since I am horrible with javascript. Here is the code to the updated map that I am trying to show the XML markers on. http://pastebin.com/rFVG4nJS -Thanks

I am looking to do something like this. Showing multiple locations of a business on Google Maps. Living Social has it and so does Groupon. https://www.livingsocial.com/ca/cities/83-ottawa/deals/1542906-basic-training-style-boot-camp?append_ref_code=home_whats_new I know it can be done manually but since it's a user based website, how would the user(business)'s added locations correspond with the Google Maps? Can you point me in the right direction?

I have some data that I am displaying: var formatted_marker_data = "<div class=\"map_header\">" + data.formatted_address + "</div> The data.formatted_address is some MySQL data which is formatted like this: 123 Main Street, San Francisco, CA A few of the entries have the lat/lon added to the address: 123 Main Street, San Francisco, CA | 37.7917618,-122.3943405 I do not want to display anything after the | Is there a way to truncate all data after the | ? The only problem I see with that is that it WILL show the |, however I suppose since they are all CA addresses, I could truncate everything after the CA. Then again, if there is an address with a CA in it, then I'm screwed. Any ideas?

Hi all, I am working on a webapplication. I have a google map, where I add polygons from an array. I loop through that array and add the polygons to the map. I also need to add an 'click' event listener to the polygon to make it editable. This is what I am doing: var polygons = data; // array holding json objects. Each object is a polyline for(var i=0; i<polygons.length; i++) { var polygon = polygons[i]; var points = []; for(var j=0; j<polygon[1].points.length; j++) { var item = new google.maps.LatLng(polygon[1].points[j].lat, polygon[1].points[j].lng); points.push(item); } var dbpolygon=new google.maps.Polygon({ path: points, strokeColor: polygon[0].type, strokeOpacity: 0.4, strokeWeight: 2, fillColor: polygon[0].type, fillOpacity: 0.4, editable: false }); dbpolygon.setMap(map); google.maps.event.addListener(dbpolygon, 'click', function() { setSelection(dbpolygon); }); } Problem The polygons are all drawing correctly. However the problem is that when I try to click on a polygon it always selects the last index. it is like it is only clicking on the last polygon added. I think when I add a new listener it overrides the old one. How can I add a listener for each polygon added in order to alert the correct index? Thank you

Hey guys, I modified a script that i found on the web and and i'm trying to load google maps polygon that could be set already and if they are then load them as default so user can edit them or remove them. Everything I try does not work I could really do with some help with this. Thanks. <script type="text/javascript">var map; var polyShape; var markers = []; var drag_poly = false; var mouseDownPos; var oldVertexPos; <!-- this is the default Polygon --> var toplace = ["(52.63586014925004, 1.2875261303270236)","(52.63888119537785, 1.3024606701219454)","(52.632838894493, 1.325119971879758)","(52.626587360201505, 1.314305305131711)","(52.62294021941067, 1.304520606645383)","(52.62585795635695, 1.2856378551805392)","(52.6309635279822, 1.303147315629758)","(52.63190122128495, 1.281174659379758)"]; function createMarker(g) { var f = google.maps; var h = function (a) { return { url: a, size: new f.Size(11, 11), anchor: new f.Point(5, 5) } }; var e = new f.Marker({ position: g, map: map, icon: h("/images/google_maps/square.png"), raiseOnDrag: false, draggable: true }); markers.push(e); f.event.addListener(e, "mouseover", function () { e.setIcon(h("/images/google_maps/m-over-square.png")) }); f.event.addListener(e, "mouseout", function () { e.setIcon(h("/images/google_maps/square.png")) }); f.event.addListener(e, "drag", function (a) { for (var b = 0, d; d = markers[b]; b++) { if (d == e) { var c = a.latLng; break } } polyShape.getPath().setAt(b, c); showValues() }); f.event.addListener(e, "click", function () { for (var a = 0, b; b = markers[a]; a++) { if (b == e) { b.setMap(null); markers.splice(a, 1); break } } polyShape.getPath().removeAt(a); showValues() }); return e } function movePoly(a) { if (drag_poly) { var b = a.latLng; var d = polyShape.getPath(); for (var c = 0, g; g = oldVertexPos[c]; c++) { var f = g.lat() + b.lat() - mouseDownPos.lat(); var h = g.lng() + b.lng() - mouseDownPos.lng(); var e = new google.maps.LatLng(f, h); d.setAt(c, e) } } } function startDrag(a) { var b = google.maps; drag_poly = true; mouseDownPos = a.latLng; oldVertexPos = []; for (var d = 0, c; c = markers[d]; d++) { oldVertexPos[d] = c.getPosition(); b.event.clearInstanceListeners(c); c.setMap(null) } markers.length = 0; map.setOptions({ draggable: false }); b.event.addListener(map, "mousemove", movePoly); if (window.event) { window.event.returnValue = false } a.stop() } function mouseUp() { if (drag_poly) { drag_poly = false; map.setOptions({ draggable: true }); google.maps.event.clearListeners(map, "mousemove"); var a = polyShape.getPath(); for (var b = 0; b < a.getLength(); b++) { createMarker(a.getAt(b)) } } } function setShape() { var a = google.maps; var b = { strokeColor: "#3355ff", strokeOpacity: .8, strokeWeight: 3, fillColor: "#335599", fillOpacity: .3, map: map }; polyShape = new a.Polygon(b); polyShape.listeners = [a.event.addListener(polyShape, "mousedown", startDrag), a.event.addListener(polyShape, "mousemove", movePoly)]; document.onmouseup = mouseUp } function showValues() { var a = document.getElementById("report"); var b = google.maps.geometry.spherical; var d = polyShape.getPath().getArray(); document.getElementById("paths").value = d; var c = b.computeArea(d, 6371); if (markers.length <= 2) { a.innerHTML = " " } else if (markers.length > 2) { a.innerHTML = c.toFixed(3) + " km²" } } function leftClick(a) { if (a.latLng) { if (!polyShape) setShape(); createMarker(a.latLng); polyShape.getPath().push(a.latLng); showValues() } } function buildMap() { var a = google.maps; var b = { center: new a.LatLng(52.6322568, 1.3127337), zoom: 12, zoom: 8, mapTypeId: a.MapTypeId.ROADMAP, draggableCursor: 'auto', draggingCursor: 'move', disableDoubleClickZoom: true, mapTypeControlOptions: { mapTypeIds: [a.MapTypeId.ROADMAP, a.MapTypeId.SATELLITE, a.MapTypeId.TERRAIN] }, panControl: false, zoomControlOptions: { style: a.ZoomControlStyle.SMALL } }; map = new a.Map(document.getElementById("map"), b); setShape(); a.event.addListener(map, "click", leftClick) } function zoomToPoly() { if (polyShape && polyShape.getPath().getLength() > 1) { var b = new google.maps.LatLngBounds(); polyShape.getPath().forEach(function (a) { b.extend(a) }); map.fitBounds(b) } } function clearPoly() { var a = google.maps; for (var b = 0, d; d = markers[b]; b++) { a.event.clearInstanceListeners(d); d.setMap(null) } if (polyShape) { for (var c = 0, g; g = polyShape.listeners[c]; c++) { a.event.removeListener(g) } polyShape.setMap(null); polyShape = null } markers.length = 0; document.getElementById("report").innerHTML = " " } window.onload = buildMap; </script> <div id="map"></div> <table id="desc"> <tr><td> Click at least at three different places on the map to draw a polygon. <b>Try to drag the shape of the polygon.</b> The corners of the polygon are draggable and removable at any position. You can add and remove vertices simply by click. </td></tr> <tr><td> Area of polygon: </td></tr> <tr><td id="report"> </td></tr> <tr><td style="height:20px"> </td></tr><tr><td> <a href="#" class="button" onclick="zoomToPoly();return false;">Zoom To Polygon</a> </td></tr><tr><td> <a href="#" class="button" onclick="clearPoly();return false;">Remove Polygon</a> </td></tr><tr><td style="padding-right:19px; height:30px;"> <span class="include"><a href="../index.html">Back</a></span> <form action="" method="POST" > <input name="paths" id="paths" value="" type="hidden" /> <input type="hidden" id="submitpath" value="Save Paths" name="save_paths"> <input type="submit" id="Save" value="Save" name="Save"> </form> </td></tr> </table>

How can I pass a variable onto a javascript. Trying to use google maps. Trying to get the variable cross_streets to work on the google maps script. Any other way of doing this? <div id="map" align="center" style="width:300px; height:300px"> <div align="center"> <?php $cross = $result['cross_streets']; ?> <script type="text/javascript"> $(function() { $("#map").gMap({ markers: [{address:"'<?php echo $cross ?>', New York, NY"}],zoom: 15}); }); </script> </div>