All geek questions in one place

The Google V3 Maps API requires a page reload to display marker icons

I read points from the database as JSON to create map markers and an unstructured list on the page. After adding some code to configure list items, the map stopped displaying marker icons at the first request - until a page reload was issued. Is it because of the time from the API? Can a list object be built from an array after loading the map, or is there some other way to speed up the code that can fix the problem? Markers with double the number of markers (300+) are loaded on the map, so I know that the problem is adding formatting to the list object. No clustering required. A demo page is available here.

Signed by JS n00b. Thank you ...... JSON POWERED GOOGLEMAP

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> var map; var infoWindow = new google.maps.InfoWindow(); function initialize() { var myLatlng = new google.maps.LatLng(49.57154029531499,-125.74951171875); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.TERRAIN, streetViewControl: false } this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } /* end initialize function */ <!-- load points from database into Locations JSON --> $(document).ready(function () { initialize(); $.getJSON("map-service.php?action=listpoints", function(json) { if (json.Locations.length > 0) { for (i=0; i<json.Locations.length; i++) { var location = json.Locations[i]; addMarker(location); } } }); //define grn icon as closed var greenicon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'; function addMarker(location) { if(location.datesummit == "0000-00-00") { var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng),icon: greenicon}; //create marker info window content var html='<B>'+location.name+'</B><BR> Register a summit <A href="http://goo.gl/Nl0UQ">here</A> '; //create list element text and onclick $("<li class=\"notclimbed\">") .html(location.name+"</li>") .click(function(){ infoWindow.close(); infoWindow.setContent(html); infoWindow.open(map, marker) }) .appendTo("#list"); } else{ var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng)}; //create marker info window content var html='<B>'+location.name+'</B><BR> Summitted: '+location.datesummit+'<BR> By:'+location.summitlog; //create list element text and onclick $("<li class=\"climbed\">") .html(location.name+"</li>") .click(function(){ infoWindow.close(); infoWindow.setContent(html); infoWindow.open(map, marker) }) .appendTo("#list"); } var marker = new google.maps.Marker(markerOptions); // add a listener to open an info window when a user clicks on one of the markers google.maps.event.addListener(marker, 'click', function() { infoWindow.close(); infoWindow.setContent(html); infoWindow.open(map, marker); }); }; // end of addmarker function }); </script> </head> <body> <div id="banner" {vertical-align:text-top;} > <img src="test.jpg" alt="Logo" style="width:150px;height:150px;vertical-align:middle"> <img src="test.png" alt="Logo" style="vertical-align:middle"> </div> <div id="map_canvas" > Map Here! </div> <div id="mindthegap"></div> <div id="list" > </div> </body>
+4
source share
1 answer

You need to make sure that the map variable is initialized before passing it to markerOptions.

A bit of overkill debugging showed me that while the page crashed, the map was still undefined.

$ (document) .ready () usually occurs before body.onload, so either put the initialize () call at the very top of your $ (document) .ready (function () {...}); or enter the initialization code here.

Also, although this is not strictly necessary, you should consider encapsulating your map variable instead of using the global one. What if you want to have 2 cards on one page?

+5
source

Source: https://habr.com/ru/post/1393904/

More articles:


All Articles