Google Map маркер не работает

Question

проблема

• мне нужно реализовать более одного маркера на карте Google.

• маркер не отображается на карте google.

HTML код

<span class="latitude" data-val={{value.latitude}} value={{value.latitude}} data-long={{value.longitude}} data-name="{{value.name}}"></span> 

код расслоение плотной

var zindex = 0; 

var locations = []; 



$.each($('.latitude'), function(index, value) { 
    //console.log($(this).data('val')); 
    var lat = $(this).data('val'); 
    var longs = $(this).data('long'); 
    locations.push($(this).data('name')); 
    locations.push($(this).data('val')); 
    locations.push($(this).data('long')); 
    locations.push(zindex); 
    console.log(locations); 
    // console.log("---------"); 
    // console.log(longs); 
    // console.log(zindex); 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(lat, longs), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map, 
      html: locations[0], 
      //icon: image 
     }); 
     console.log(locations[i]); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
    zindex++; 
}); 

JSON

["Conference Planning Meeting", 25.788969, -80.226439, 0, "Darwin Festival", -12.462827, 130.841777, 1, "Indiana State Fair", 39.768403, -86.158068, 2, "ICTP-CIMPA Advanced School", "-13.525000", -71.972222, 3, "HR Management MBA", 25.271139, 55.307485, 4, "10-day Finance & Accounting MBA", 25.271139, 55.307485, 5, "Leadership and Management Skills for the 21st Century", 51.511214, -0.119824, 6, "Results-Based Management and Performance Indicators", "45.508670", -73.553993, 7, "Capital Budgeting and Financial Management in the Public Sector", "45.508670", -73.553993, 8, "IDPM Accreditation Training Session", "45.508670", -73.553993, 9, "PPMS Accreditation Training Session", "45.508670", -73.553993, 10, "Erie County Fair", 42.715893, -78.829477, 11, "International Conference of Physics Students", 45.813029, 15.977895, 12, "Iowa State Fair", 41.600545, -93.609106, 13, "Illinois State Fair", 42.101483, -72.589811, 14, "Missouri State Fair", 38.704461, -93.228261, 15, "West Virginia State Fair", 40.964529, "-76.884410", 16, "Central States Fair", 44.080543, -103.231015, 17, "Wilson County Fair", "36.208110", -86.291102, 18, "Miami County Fair", 42.605589, "-83.149930", 19, "Montgomery County Agricultural Fair", 39.143441, -77.201371, 20, "Flowers And Honey All Year Round", "59.934280", 30.335099, 21, "School Fair", 47.026859, 28.841551, 22, "Singapore World Stamp Exhibition", 1.280095, 103.850949, 23, "Wilderness Medicine Conference", -33.867487, "151.206990", 24…] 

• я м не удалось найти вопрос любое предложение можно только приветствовать ,
• У меня есть код с сайта stackoverflow.

Answer 1

Так что было трудно читать ваш код, но вот пример, который создает маркер для каждого span элемента с классом «местоположение» использовать данные атрибуты: data-lat (широта), data-lng (долгота) и data-name ,

var map, 
 
    infowindow, 
 
    locations = []; 
 

 
$(document).ready(function() { 
 
    //initialize the map 
 
    map = new google.maps.Map($('#map')[0], { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(0, 0), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    //initialize the infowindow 
 
    infowindow = new google.maps.InfoWindow(); 
 

 
    //will use to fit all markers on map 
 
    var bounds = new google.maps.LatLngBounds() 
 

 
    //get locations 
 
    $('.location').each(function(i, el) { 
 
    var latitude = $(el).data('lat') 
 
    var longitude = $(el).data('lng') 
 
    var latlng = new google.maps.LatLng(latitude, longitude) 
 

 
    //initialize marker 
 
    var marker = new google.maps.Marker({ 
 
     position: latlng, 
 
     map: map, 
 
     name: $(el).data('name') 
 
    }) 
 

 
    //include this marker in resulting view 
 
    bounds.extend(latlng) 
 

 
    //Notice the scope of the callback; `this` is context of clicked marker 
 
    google.maps.event.addListener(marker, 'click', (function(e) { 
 
     infowindow.close() 
 
     infowindow.setContent(this.name) 
 
     infowindow.open(map, marker) 
 
    }).bind(marker)); 
 

 
    //add to collection so it can be accessed later 
 
    locations.push(marker) 
 
    }); 
 

 
    //set the map to show all markers 
 
    map.fitBounds(bounds); 
 
});

html, body, 
 
#map { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
span.location { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 

 
<span class="location" data-lat="25.788969" data-lng="-80.226439" data-name="Conference Planning Meeting">Conference Planning Meeting</span> 
 
<span class="location" data-lat="-12.462827" data-lng="130.841777" data-name="Darwin Festival">Darwin Festival</span> 
 
<span class="location" data-lat="39.768403" data-lng="-86.158068" data-name="Indiana State Fair">Indiana State Fair</span> 
 
<span class="location" data-lat="-13.525000" data-lng="-71.972222" data-name="ICTP-CIMPA Advanced School">ICTP-CIMPA Advanced School</span> 
 
<span class="location" data-lat="25.271139" data-lng="55.307485" data-name="HR Management MBA">HR Management MBA</span> 
 
<span class="location" data-lat="25.271139" data-lng="55.307485" data-name="10-day Finance & Accounting MBA">10-day Finance & Accounting MBA</span> 
 
<span class="location" data-lat="51.511214" data-lng="-0.119824" data-name="Leadership and Management Skills for the 21st Century">Leadership and Management Skills for the 21st Century</span> 
 
<span class="location" data-lat="45.508670" data-lng="-73.553993" data-name="Results-Based Management and Performance Indicators">Results-Based Management and Performance Indicators</span> 
 
<span class="location" data-lat="45.508670" data-lng="-73.553993" data-name="Capital Budgeting and Financial Management in the Public Sector">Capital Budgeting and Financial Management in the Public Sector</span> 
 
<span class="location" data-lat="45.508670" data-lng="-73.553993" data-name="IDPM Accreditation Training Session">IDPM Accreditation Training Session</span> 
 
<span class="location" data-lat="45.508670" data-lng="-73.553993" data-name="PPMS Accreditation Training Session">PPMS Accreditation Training Session</span> 
 
<span class="location" data-lat="42.715893" data-lng="-78.829477" data-name="Erie County Fair">Erie County Fair</span> 
 
<span class="location" data-lat="45.813029" data-lng="15.977895" data-name="International Conference of Physics Students">International Conference of Physics Students</span> 
 
<span class="location" data-lat="41.600545" data-lng="-93.609106" data-name="Iowa State Fair">Iowa State Fair</span> 
 
<span class="location" data-lat="42.101483" data-lng="-72.589811" data-name="Illinois State Fair">Illinois State Fair</span> 
 
<span class="location" data-lat="38.704461" data-lng="-93.228261" data-name="Missouri State Fair">Missouri State Fair</span> 
 
<span class="location" data-lat="40.964529" data-lng="-76.884410" data-name="West Virginia State Fair">West Virginia State Fair</span> 
 
<span class="location" data-lat="44.080543" data-lng="-103.231015" data-name="Central States Fair">Central States Fair</span> 
 
<span class="location" data-lat="36.208110" data-lng="-86.291102" data-name="Wilson County Fair">Wilson County Fair</span> 
 
<span class="location" data-lat="42.605589" data-lng="-83.149930" data-name="Miami County Fair">Miami County Fair</span> 
 
<span class="location" data-lat="39.143441" data-lng="-77.201371" data-name="Montgomery County Agricultural Fair">Montgomery County Agricultural Fair</span> 
 
<span class="location" data-lat="59.934280" data-lng="30.335099" data-name="Flowers And Honey All Year Round">Flowers And Honey All Year Round</span> 
 
<span class="location" data-lat="47.026859" data-lng="28.841551" data-name="School Fair">School Fair</span> 
 
<span class="location" data-lat="1.280095" data-lng="103.850949" data-name="Singapore World Stamp Exhibition">Singapore World Stamp Exhibition</span> 
 
<span class="location" data-lat="-33.867487" data-lng="151.206990" data-name="Wilderness Medicine Conference">Wilderness Medicine Conference</span> 
 

 
<div id="map"></div>