javascript - Adding Custom Control to Google Map (Adding toggle for traffic layer) -



javascript - Adding Custom Control to Google Map (Adding toggle for traffic layer) -

i trying add together google maps traffic layer control, , since new this, cannot figure out. have gotten below script net fine tuning, cannot figure out how command map. need way toggle traffic layer on , off average user, if there improve way add together command map, anything. thanks.

var map; var chicago = new google.maps.latlngbounds(); function homecontrol(controldiv, map) { controldiv.style.padding = '5px'; var controlui = document.createelement('div'); controlui.style.backgroundcolor = 'white'; controlui.style.borderstyle = 'solid'; controlui.style.borderwidth = '2px'; controlui.style.cursor = 'pointer'; controlui.style.textalign = 'center'; controlui.title = 'click set map home'; controldiv.appendchild(conrolui); var controltext = document.createelement('div'); controltext.style.fontfamily = 'arial.sans-serif'; controltext.style.fontsize = '12px'; controltext.style.paddingleft = '4px'; controltext.style.paddingright = '4px'; controltext.innerhtml = '<b>home</b>'; controlui.appendchild(controltext); googlemaps.event.adddomlistener(controlui, 'click', function() { map.setcenter(chicago) }); } function addtrafficlayer() { var mylatlng = new google.maps.latlngbounds(); var mapdiv = document.getelementbyid('map'); var mapoptions = { zoom: 13, maxwidth: 60, } map = new google.maps.map(mapdiv, mapoptions); var homecontroldiv = document.createelement('div'); var homecontrol = newhomecontrol(homecontroldiv, map); homecontroldiv.index = 1; map.controls(google.maps.controlposition.top_right).push(homecontroldiv); var trafficlayer = new google.maps.trafficlayer(); trafficlayer.setmap(map); var map = new google.maps.map(document.getelementbyid('map'), mapoptions); } google.maps.event.adddomlistener(window, 'load', addtrafficlayer);

first of all, addtrafficlayer function initializes map... twice. function should named init or similar instead. here's should go in it:

function init() { var options = { zoom: 16, center: new google.maps.latlng(40.747688, -74.004142), maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid('map'), options); trafficlayer = new google.maps.trafficlayer(); google.maps.event.adddomlistener(document.getelementbyid('traffictoggle'), 'click', toggletraffic); }

the toggletraffic pretty simple:

function toggletraffic(){ if(trafficlayer.getmap() == null){ //traffic layer disabled.. enable trafficlayer.setmap(map); } else { //traffic layer enabled.. disable trafficlayer.setmap(null); } }

then need markup going:

<div id="map"></div> <button id="traffictoggle">toggle traffic layer</button>

see code in action here.

javascript html

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -