Databases
StackOverflow2013
Postsdbo
POGoogle Maps API V3 and Javascript Results and Markers
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps API V3 and Javascript Results and Markers
    primarykey
    data
    text
    <p>EDIT: Basically like the ASDA Store Locator</p> <p>I have a store locator where when you type in your postcode and it shows the 3 stores that are close to you. From this 3 markers appear on the map for each location. The data is pulled in from a MYSQL database and that is where the lat and long is stored. What i am after is have the results numbered say 1,2 and 3 and a different marker with the numbers 1 2 and 3 on so they know what result store relates to what marker. I know how to create markers but i am im unsure how to apply this. Here is my code that i have used to show the results and display the markers on the map:</p> <p>PHP</p> <pre><code>&lt;?php which displays the results down the side of the map.. if(isset($stores)){ foreach($stores as $store){ ?&gt; &lt;div class="stores"&gt; &lt;p class="name"&gt;&lt;?php echo $store['name']; ?&gt;&lt;/p&gt; &lt;p class="address"&gt;&lt;?php echo $store['address']; ?&gt;&lt;/p&gt; &lt;p class="address"&gt;&lt;?php echo $store['postcode']; ?&gt;&lt;/p&gt; &lt;/div&gt; &lt;php number_format($store['distance'],2) ?&gt; miles &lt;?php } } ?&gt; </code></pre> <p>To get the markers for each result on the map i obviously used javascript:</p> <pre><code>function initialize() { var locations = []; &lt;?php $count = 0; foreach($stores as $store){ ?&gt; locations.push(['&lt;?php echo $store['name'] ?&gt;','&lt;?php echo $store['lat'] ?&gt;','&lt;?php echo $store['lng'] ?&gt;','&lt;?php echo $count++; ?&gt;']); &lt;?php } ?&gt; var map = new google.maps.Map(document.getElementById('map'), { zoom: 5, center: new google.maps.LatLng(55.136319, -2.504183), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i &lt; 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() { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } google.maps.event.addDomListener(window, 'load', initialize); </code></pre> <p>This displays the default marker but if i was to declare each marker a image or colour, how do i apply it to the array results for each result? Any guidance would be appreciated.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser2212564
    1. USuser2212564
    plurals
    1. This table or related slice is empty.
    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
    1. VO
      singulars
      1. POGoogle Maps API V3 and Javascript Results and Markers
      1. USuser2729578
      1. VTFavorite
    1. This table or related slice is empty.
 

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