javascript - google map marker is not working -
problem
i need implement more 1 marker in google map.
marker not visible in google map.
html code
<span class="latitude" data-val={{value.latitude}} value={{value.latitude}} data-long={{value.longitude}} data-name="{{value.name}}"></span> js code
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; (i = 0; < 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 , management skills 21st century", 51.511214, -0.119824, 6, "results-based management , performance indicators", "45.508670", -73.553993, 7, "capital budgeting , financial management in 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 , honey 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…] - i m unable find issue suggestion welcome.
- i have code stackoverflow site.
so tough read code here example creates marker each span element class "location" use data attributes: data-lat(latitude), data-lng(longitude), , data-name.
var map, infowindow, locations = []; $(document).ready(function() { //initialize map map = new google.maps.map($('#map')[0], { zoom: 10, center: new google.maps.latlng(0, 0), maptypeid: google.maps.maptypeid.roadmap }); //initialize infowindow infowindow = new google.maps.infowindow(); //will use fit 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 marker in resulting view bounds.extend(latlng) //notice scope of callback; `this` 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 collection can accessed later locations.push(marker) }); //set map show 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 , management skills 21st century">leadership , management skills 21st century</span> <span class="location" data-lat="45.508670" data-lng="-73.553993" data-name="results-based management , performance indicators">results-based management , performance indicators</span> <span class="location" data-lat="45.508670" data-lng="-73.553993" data-name="capital budgeting , financial management in public sector">capital budgeting , financial management in 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 , honey year round">flowers , honey 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>
Comments
Post a Comment