Databases
StackOverflow2013
Postsdbo
POGoogle Maps V3 Overlapping Markers on exact Location
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps V3 Overlapping Markers on exact Location
    primarykey
    data
    text
    <p>I am having issues with markers overlapping, please do not down vote as I am not highly schooled in javascript also I have looked at the different answers offered on stackoverflow but have not been able to use them to find a solution so please help! The code is grabbing php for lat and long based on static points I have given I would simply like to list all of the information in the same marker rather than have it overlap markers any help would be highly appreciated here is the code:</p> <pre><code> &lt;head&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; &lt;META HTTP-EQUIV="refresh" &gt; &lt;title&gt;Operations&lt;/title&gt; &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=APIKEY&amp;sensor=false"&gt;&lt;/script&gt; &lt;script src="oms.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; //&lt;![CDATA[ var customIcons = { restaurant: { icon: 'mm_20_blue.png' }, bar: { icon: 'mm_20_blue.png' } }; function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(32.298342, -64.791098), zoom: 17, mapTypeId: google.maps.MapTypeId.SATELLITE }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("genxml.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i &lt; markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var id = markers[i].getAttribute("permitnumber"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "&lt;b&gt;" + name + "&lt;/b&gt; &lt;br/&gt;" + address + "&lt;br/&gt;" + '&lt;a href="http://server/editform.php?find=' + id + '" &gt;More Info&lt;/a&gt; &lt;br/&gt; &lt;form action="del.php" method="post" enctype="multipart/form-data"&gt; &lt;input type="checkbox" name="checkbox" id="checkbox" value="' + id +'"&gt; &lt;input name="delete" type="submit" id="delete" value="Delete"&gt; ' ; var icon = customIcons[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow, animation: google.maps.Animation.BOUNCE }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing() {} //]]&gt; &lt;/script&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-24568877-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google- analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); &lt;/script&gt; &lt;/head&gt; &lt;body onload="load()" bgcolor="#A8F748" &gt; &lt;div id="map" style="margin:auto; width: 90%; height: 470px"&gt;&lt;/div&gt; &lt;/body&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLearning
    1. USLearning
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POGoogle Maps V3 Overlapping Markers on exact Location
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI suggest you create an array of non-overlapping markers. For each lat/lng point, check the markers you have created so far. If the X/Y coord is within some radius of the point, then assume it overlaps. Update the marker to contain the additional information. If the point is outside of the current list of markers, make a new marker and add it to the list. - OpenGeoCode.Org
      singulars
      1. POGoogle Maps V3 Overlapping Markers on exact Location
      1. USAndrew - OpenGeoCode
    2. COpossible duplicate of [Google Maps Multiple markers with the exact same location Not working](http://stackoverflow.com/questions/17708252/google-maps-multiple-markers-with-the-exact-same-location-not-working)
      singulars
      1. POGoogle Maps V3 Overlapping Markers on exact Location
      1. USgeocodezip
    3. COThe markers that overlap have the exact same lat and long point I simply would like there to be one marker with all of the different content for different markers that would be on that point, unfortunately I am unfamiliar with javascript enough to achieve this. @Andrew
      singulars
      1. POGoogle Maps V3 Overlapping Markers on exact Location
      1. USLearning
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload