jquery - Active and not active marker on click using google maps -

-

how achieve having custom active state on click , when not active defaults original custom marker. i've tried various attempts closet i've gotten it. has solved before?

jquery(function($) {      var is_internetexplorer11 = navigator.useragent.tolowercase().indexof('trident') > -1;     var marker_url = (is_internetexplorer11) ? 'map_marker_highlight.png' : 'map_marker_highlight.png';     var activeicon = {         url: 'map_marker.png',         // marker 20 pixels wide 32 pixels tall.         //size: new google.maps.size(32, 32),         // origin image 0,0.         //origin: new google.maps.point(130.3065885, -193.6986437),         // anchor image base of flagpole @ 0,32.         anchor: new google.maps.point(16, 40)     };         var locations = [         ['<b>name</b><br>address<br>state<br>', 34.845244, -80.371634, 4],         ['<b>name</b><br>address<br>state<br>', 34.845244, -80.371634, 4],     ];      var mapoptions = {         center: new google.maps.latlng(138.3065885, -193.6986437),         zoom: 4,         maptypeid: google.maps.maptypeid.roadmap,         maptypecontrol: false,         zoomcontrol: true,         scrollwheel: false,         styles: styles     };     map = new google.maps.map(document.getelementbyid("mack-map"), mapoptions);      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,             icon: marker_url,         });          google.maps.event.addlistener(marker, 'click', (function(marker, i) {             return function() {                 //console.log(activeicon);                 infowindow.setcontent(locations[i][0]);                 if (infowindow) {                     this.seticon(activeicon)                 } else {                     this.seticon(marker_url)                 }                 infowindow.open(map, marker);             }         })(marker, i));     } });

when marker clicked, set icon active, after setting markers default icon. 1 option (assumes references markers available in array markers):

google.maps.event.addlistener(marker, 'click', (function(marker, i) {   return function() {     (var j = 0; j < markers.length; j++) {       markers[j].seticon(normalicon);     }     infowindow.setcontent(locations[i][0]);     this.seticon(activeicon)     infowindow.open(map, marker);   } })(marker, i));

proof of concept fiddle

code snippet:

jquery(function($) {    var markers = [];    var activeicon = {      url: 'http://maps.google.com/mapfiles/ms/micons/yellow.png'    };    var normalicon = {      url: "http://maps.google.com/mapfiles/ms/micons/blue.png"    };    var locations = [      ['<b>name</b><br>address<br>state<br>', 34.845244, -80.371634, 4],      ['<b>name</b><br>address<br>state<br>', 34.84, -80.375, 4],      ['<b>name</b><br>address<br>state<br>', 34.86, -80.38, 4]    ];    var mapoptions = {      center: new google.maps.latlng(34.85, -80.371634),      zoom: 13,      maptypeid: google.maps.maptypeid.roadmap,      maptypecontrol: false,      zoomcontrol: true,      scrollwheel: false    };    map = new google.maps.map(document.getelementbyid("mack-map"), mapoptions);    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,        icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",      });      markers.push(marker);      google.maps.event.addlistener(marker, 'click', (function(marker, i) {        return function() {          (var j = 0; j < markers.length; j++) {            markers[j].seticon(normalicon);          }          infowindow.setcontent(locations[i][0]);          this.seticon(activeicon)          infowindow.open(map, marker);        }      })(marker, i));    }  });
html,  body,  #mack-map {    height: 100%;    width: 100%;    margin: 0px;    padding: 0px  }
<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>  <div id="mack-map"></div>


Comments

Post a Comment

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

-
i use delphi xe2 , indy10 udp protocol. can't receive server echo on client side if use receivebuffer method. got "socket error # 10040" although send small echo message server client. console application illustrate problem below. in advance. program project1; {$apptype console} {$r *.res} uses system.sysutils, idglobal, idbasecomponent, idcomponent, idsockethandle, idudpclient, idudpserver, idudpbase, idstack; type tudp_serv = class(tidudpserver) procedure udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); end; var udpserver: tudp_serv; udpcl: tidudpclient; bsnd, brcv: tbytes; s: string; k: integer; //============================================================================== procedure tudp_serv.udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); begin writeln(' server read: ' + tohex(adata, length(adata))); abinding sendto(peerip, peerport, adat...
Read more

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

-
i new windows programming. here goes code objiwbemlocator = new qaxobject("wbemscripting.swbemlocator"); objwmiservice = objiwbemlocator->querysubobject("connectserver(qstring&,qstring&)",qstring("."),qstring("root\\cimv2")); qaxobject* returnlist = objwmiservice->querysubobject("execquery(qstring&)", qstring("select * %1").arg(domain)); qaxobject* result = returnlist->querysubobject("itemindex(int)", 0); i getting error on runtime qt activex wmi qaxbase::dynamiccallhelper: itemindex(int): no such property in but itemindex method exists msdn says the itemindex method not work collections not contain swbemobjects, such swbemmethodset, swbemnamedvalueset, swbemprivilegeset, swbempropertyset, , swbemqualifierset. what selecting ? have tried iterating on collection ? plus need minimum windows vista itemindex method. hope helps
Read more

Enable autocomplete or intellisense in Atom editor for PHP -

-
i'm first time user of atom editor php code. atom can autocomplete built-in functions of php. possible make editor autocomplete custom function written in separate file? function.php <?php function printsomething() { echo "hello world"; } index.php <?php require_once "function.php"; printsomething(); // autocompleted atom editor while typing thanks in advance. there text file in %userprofile%.atom called snippets.cson. in there can add snippet. more this: http://flight-manual.atom.io/using-atom/sections/snippets/ but need think can use later on other files well. otherwise need copy , paste.
Read more