javascript - Google map marker doesn't appear on map overlay -


i placing custom overlay on google map using png image. have markers place on maps, before adding overlay markers appearing pretty good, when add overlay still renders on markers won't show on overlay. want markers on overlay, how can this?

var overlay; usgsoverlay.prototype = new google.maps.overlayview(); var markers = []; var map; var india = new google.maps.latlng(23.9800,85.3500); var image = 'images/pushpins/set1.png';  function initialize() {   var mapoptions = {     zoom: 5,     disabledefaultui: true,     center: india   };    var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);    var swbound = new google.maps.latlng(0.615223, 67.368164);   var nebound = new google.maps.latlng(41.996828, 104.890);   var bounds = new google.maps.latlngbounds(swbound, nebound);    // photograph courtesy of u.s. geological survey.   var srcimage = 'images/india.png';    // custom usgsoverlay object contains usgs image,   // bounds of image, , reference map.   overlay = new usgsoverlay(bounds, srcimage, map);    drop(3000);    settimeout(function() {     clearmarkers();    // initialize();   }, 19000);  }  function drop() {   clearmarkers();   (var = 0; < locations.length; i++) {     var city = locations[i][0];     var pro_cat = locations[i][1];     var product_image = locations[i][3];     addmarkerwithtimeout(locations[i][2], * 500);       getcity(city,pro_cat, * 500);     if(product_image == null)     {         //if image found in row-do nothing     }     else {       //if image found        showdiv(city,product_image, * 500);       /*window.settimeout(function() {          hidediv();       },2500);*/     }   } }   function usgsoverlay(bounds, image, map) {    // initialize properties.   this.bounds_ = bounds;   this.image_ = image;   this.map_ = map;    // define property hold image's div. we'll   // create div upon receipt of onadd()   // method we'll leave null now.   this.div_ = null;    // explicitly call setmap on overlay.   this.setmap(map); } // [end region_constructor]  // [start region_attachment] /**  * onadd called when map's panes ready , overlay has been  * added map.  */ usgsoverlay.prototype.onadd = function() {    var div = document.createelement('div');   div.style.borderstyle = 'none';   div.style.borderwidth = '0px';   div.style.position = 'absolute';    // create img element , attach div.   var img = document.createelement('img');   img.src = this.image_;   img.style.width = '100%';   img.style.height = '100%';   img.style.position = 'absolute';   div.appendchild(img);    this.div_ = div;    // add element "overlaylayer" pane.   var panes = this.getpanes();   panes.overlaylayer.appendchild(div); }; // [end region_attachment]  // [start region_drawing] usgsoverlay.prototype.draw = function() {    // use south-west , north-east   // coordinates of overlay peg correct position , size.   // this, need retrieve projection overlay.   var overlayprojection = this.getprojection();    // retrieve south-west , north-east coordinates of overlay   // in latlngs , convert them pixel coordinates.   // we'll use these coordinates resize div.   var sw = overlayprojection.fromlatlngtodivpixel(this.bounds_.getsouthwest());   var ne = overlayprojection.fromlatlngtodivpixel(this.bounds_.getnortheast());    // resize image's div fit indicated dimensions.   var div = this.div_;   div.style.left = sw.x + 'px';   div.style.top = ne.y + 'px';   div.style.width = (ne.x - sw.x) + 'px';   div.style.height = (sw.y - ne.y) + 'px'; }; // [end region_drawing]  // [start region_removal] // onremove() method called automatically api if // ever set overlay's map property 'null'. usgsoverlay.prototype.onremove = function() {   this.div_.parentnode.removechild(this.div_);   this.div_ = null; }; // [end region_removal]    function addmarkerwithtimeout(position, timeout) {   window.settimeout(function() {     markers.push(new google.maps.marker({       position: position,       map: map,       icon: image,       optimized: false,       //animation: google.maps.animation.drop     }));   }, timeout);   //alert("hello"); }  function clearmarkers() {   (var = 0; < markers.length; i++) {     markers[i].setmap(null);   }   markers = [];   document.getelementbyid('order_list').innerhtml = "";   document.getelementbyid('product-list-display').style.display = "none"; }  function getcity(city_name, product_cat, timeout){   window.settimeout(function() {   var writecity = document.createtextnode(city_name+', '+product_cat);   document.getelementbyid("order_list").appendchild(writecity);   document.getelementbyid("order_list").appendchild(document.createelement('br'));   }, timeout); } google.maps.event.adddomlistener(window, 'load', initialize);

your problem map variable used in addmarkerwithtimeout function global version, never initialized, not 1 local initialize function, 1 contains reference google.maps.map object , has overlay added it. remove var before inside initialize function, global version initialized:

var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);

working fiddle

code snippet:

var overlay;  usgsoverlay.prototype = new google.maps.overlayview();  var markers = [];  var map;  var india = new google.maps.latlng(23.9800, 85.3500);  var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png';  var locations = [];    function showdiv() {}    function initialize() {    var mapoptions = {      zoom: 5,      disabledefaultui: true,      center: india    };      map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);      var swbound = new google.maps.latlng(0.615223, 67.368164);    var nebound = new google.maps.latlng(41.996828, 104.890);    var bounds = new google.maps.latlngbounds(swbound, nebound);      // photograph courtesy of u.s. geological survey.    // photograph courtesy of u.s. geological survey.    var srcimage = 'https://developers.google.com/maps/documentation/javascript/';    srcimage += 'examples/full/images/talkeetna.png';      var sw = bounds.getsouthwest();    var ne = bounds.getnortheast();    (var = 0; < 100; i++) {      var ptlat = math.random() * (ne.lat() - sw.lat()) + sw.lat();      var ptlng = math.random() * (ne.lng() - sw.lng()) + sw.lng();      var point = new google.maps.latlng(ptlat, ptlng);      locations[i] = ["city" + i, "cat" + i, point, ""];    }      // custom usgsoverlay object contains usgs image,    // bounds of image, , reference map.    overlay = new usgsoverlay(bounds, srcimage, map);      drop(3000);      settimeout(function() {      clearmarkers();      // initialize();    }, 19000);    }    function drop() {    clearmarkers();    (var = 0; < locations.length; i++) {      var city = locations[i][0];      var pro_cat = locations[i][1];      var product_image = locations[i][3];      addmarkerwithtimeout(locations[i][2], * 500);      getcity(city, pro_cat, * 500);      if (product_image == null) {        //if image found in row-do nothing      } else {        //if image found         showdiv(city, product_image, * 500);        /*window.settimeout(function() {           hidediv();        },2500);*/      }    }  }      function usgsoverlay(bounds, image, map) {        // initialize properties.      this.bounds_ = bounds;      this.image_ = image;      this.map_ = map;        // define property hold image's div. we'll      // create div upon receipt of onadd()      // method we'll leave null now.      this.div_ = null;        // explicitly call setmap on overlay.      this.setmap(map);    }    // [end region_constructor]    // [start region_attachment]  /**   * onadd called when map's panes ready , overlay has been   * added map.   */  usgsoverlay.prototype.onadd = function() {      var div = document.createelement('div');    div.style.borderstyle = 'none';    div.style.borderwidth = '0px';    div.style.position = 'absolute';      // create img element , attach div.    var img = document.createelement('img');    img.src = this.image_;    img.style.width = '100%';    img.style.height = '100%';    img.style.position = 'absolute';    div.appendchild(img);      this.div_ = div;      // add element "overlaylayer" pane.    var panes = this.getpanes();    panes.overlaylayer.appendchild(div);  };  // [end region_attachment]    // [start region_drawing]  usgsoverlay.prototype.draw = function() {      // use south-west , north-east    // coordinates of overlay peg correct position , size.    // this, need retrieve projection overlay.    var overlayprojection = this.getprojection();      // retrieve south-west , north-east coordinates of overlay    // in latlngs , convert them pixel coordinates.    // we'll use these coordinates resize div.    var sw = overlayprojection.fromlatlngtodivpixel(this.bounds_.getsouthwest());    var ne = overlayprojection.fromlatlngtodivpixel(this.bounds_.getnortheast());      // resize image's div fit indicated dimensions.    var div = this.div_;    div.style.left = sw.x + 'px';    div.style.top = ne.y + 'px';    div.style.width = (ne.x - sw.x) + 'px';    div.style.height = (sw.y - ne.y) + 'px';  };  // [end region_drawing]    // [start region_removal]  // onremove() method called automatically api if  // ever set overlay's map property 'null'.  usgsoverlay.prototype.onremove = function() {    this.div_.parentnode.removechild(this.div_);    this.div_ = null;  };  // [end region_removal]        function addmarkerwithtimeout(position, timeout) {    window.settimeout(function() {      markers.push(new google.maps.marker({        position: position,        map: map,        icon: image,        optimized: false,        title: "marker " + markers.length,        //animation: google.maps.animation.drop      }));    }, timeout);    //alert("hello");  }    function clearmarkers() {    (var = 0; < markers.length; i++) {      markers[i].setmap(null);    }    markers = [];    document.getelementbyid('order_list').innerhtml = "";    document.getelementbyid('product-list-display').style.display = "none";  }    function getcity(city_name, product_cat, timeout) {    window.settimeout(function() {      var writecity = document.createtextnode(city_name + ', ' + product_cat);      document.getelementbyid("order_list").appendchild(writecity);      document.getelementbyid("order_list").appendchild(document.createelement('br'));    }, timeout);  }  google.maps.event.adddomlistener(window, 'load', initialize);
html,  body,  #map-canvas {    height: 500px;    width: 500px;    margin: 0px;    padding: 0px  }
<script src="https://maps.googleapis.com/maps/api/js"></script>  <div id="map-canvas" style="border: 2px solid #3872ac;"></div>  <div id="order_list"></div>  <div id="product-list-display"></div>


Comments

Post a Comment

Popular posts from this blog

c# - Validate object ID from GET to POST -

i have method allows user access comment have made on site. have post method lets them update comment. my normal solution send entire comment model through, let them update it, update on database when post back. involve sending commentid through in hiddenfor , can manipulated. how can verify commentid sent in get method same i'm getting in post , not able alter comment wish? how can verify commentid sent in method same i'm getting in post? basically have validate following things in post - user logged-in user. authenticated users post comments. commentid in post , should valid commentid , should present in database. userid associated logged-in user should same userid associated comment . comment should contain userid column, can check @ time of update. to make sure update happens comment has been sent in get - hold commentid in session , in post action compare commentid value in session .
Read more

node.js - Custom Model Validator SailsJS -

when using custom model validator checks record within model. return within spread doesn't seem end control flow. //post.js model /** * custom validator **/ types: { isuservalid: function(user_id) { var promise = require('bluebird'); promise.all([ user.findone({id: user_id}) ]) .spread(function(user) { console.log(user); if (user === null || user === undefined) { console.log('failed'); return false; }else{ console.log('passed'); return true; } }); } }, my response standard validation failed response. { "error": "e_validation", "status": 400, "summary": "1 attribute invalid", "model": "post", "invalidattributes": { "owner": [ { "rule": "isuservalid", ...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more