Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can't have multiple elements with the same ID. You can have multiple elements with the same class name. If you change your input elements to use class instead of ID, you can get an array of the elements by using getElementsByClassName:</p> <p>HTML:</p> <pre><code>&lt;input class="userLat" type="text" value="41.3275" /&gt; &lt;input class="userLat" type="text" value="40.5486" /&gt; &lt;input class="userLat" type="text" value="41.9637" /&gt; &lt;input class="userLng" type="text" value="19.8189" /&gt; &lt;input class="userLng" type="text" value="19.0056" /&gt; &lt;input class="userLng" type="text" value="19.4513" /&gt; </code></pre> <p>Javascript:</p> <pre><code>$(document).ready(function() { //------- Google Maps ---------// var markers = [] ; var bounds = new google.maps.LatLngBounds(); function createMarker(latlng) { bounds.extend(latlng); var marker = new google.maps.Marker({ position: latlng }); markers.push(marker); } var lat = document.getElementsByClassName('userLat'); var lng = document.getElementsByClassName('userLng'); for (var i=0; (i&lt;lat.length &amp;&amp; i&lt; lng.length); i++) { var latlng = new google.maps.LatLng(lat[i].value, lng[i].value); createMarker(latlng); } // Creating an object literal containing the properties we want to pass to the map var options = { zoom: 15, // This number can be set to define the initial zoom level of the map mapTypeId: google.maps.MapTypeId.ROADMAP // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN }; // Calling the constructor, thereby initializing the map var map = new google.maps.Map(document.getElementById('map_div'), options); for (var i=0; i&lt;markers.length; i++) { markers[i].setMap(map); } // center and zoom the map to show the markers map.fitBounds(bounds); </code></pre> <p><a href="http://geocodezip.com/v3_SO_simpleMap_jqueryMultipleMarkers.html" rel="nofollow">working example</a></p>
    singulars
    1. This table or related slice is empty.
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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