archive-com.com » COM » S » SVENNERBERG.COM

Total: 274

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • The difference between add(), find() and filter() in jQuery | In usability we trust
    following HTML div id div1 p Some text p div div id div2 p Some more text p div We re going to use this HTML to do some selections from add As the name implies this method is used to add more elements to a collection that you ve already got So if you have a div with the id div1 in your selection and wants to add a div with the id div2 to it add is the method to use This code will add div2 to the collection that already contains div1 div1 add div2 Read about add in the jQuery documentation find Find on the other hand is used to find descendant element from your selection So instead of adding more elements to it it narrows it down to fewer elements It searches what s inside the parent element s in your selection In the example below it will search for content inside of the selected div that matches the expression Refine the selection to contain only the p elements inside of div1 div1 find p Read about find in the jQuery documentation filter Filter is quite similar to find but instead of searching the descendant elements of the selection it searches or rather filters the elements that are in the selection Reduces the selection to only contain the div with the id div1 div filter div1 Read about filter in the jQuery documentation Demo page I ve constructed a simple demo page which demonstrates how these methods work Please try it out Conclusion All of these methods are very useful but it s important to know which one to choose in a given situation If you want to extend your selection to include more elements you should use add If you want to narrow down

    Original URL path: http://www.svennerberg.com/2009/09/the-difference-between-add-find-and-filter-in-jquery/ (2016-04-28)
    Open archived version from archive

  • Google Maps API 3 – InfoWindows | In usability we trust
    with you that InfoWindow tabs is a very appealing feature in API v2 Start an uproar in the API forum and maybe the API team will add it in v3 You could also add a feature request The API is still in Beta so everything is possible Reply Ricky June 2 2010 at 5 45 am Thank you for this tutorial It was really helpful I just want to share something I created a markerArray variable to store the markers in the map I also had the infoArray variable to store all the associated infowindow All these were done using PHP and mySql I tried to loop through the action listener so as to reduce the code But I encountered the same problem as stated above The infowindow is displayed only for the last marker But I found a solution to this problem And that is by adding a function inside the loop itself After adding all the markers from the database I looped the markerArray and called the function addInfo with the parameters markerArray x infoArray x map Inside this function I added the addListener And to my surprise it worked Lastly thanks for this tutorial It was really helpful Reply Andrew October 30 2011 at 10 56 pm Yes Great catch Don t really know why this works but I m glad it does Reply Frederick Ricaforte June 8 2010 at 2 28 am Infowindow doesn t really look nice in a small map basically the rounded corners and the balloon tip takes so much space Is there a way to use the smaller square balloon in V3 Although there are available examples to replace the infowindow but most of the solutions fixed size images which are not as flexible as the current infowindow Hope you could share some of your tricks to solve this Thanks Reply Sam June 8 2010 at 8 57 pm Maybe I am slow but I can t seem to get the concept of what I need to add for multiple markers Can someone provide a link with an example Thank you very much Reply Rene June 9 2010 at 1 27 pm Hi I m not a JavaScript man but can recognise simple statements and repeat them to expand on existing code Can you direct me to a sample where I can add multiple custom markers plus an info window for each marker I have found all this individually but I m not able to combine the features I ll be internally grateful after devoting 3 days on this Cheers Rene Reply Frederick Ricaforte June 11 2010 at 4 09 am Rene If you have not found an answer to your question probably you can look into complex overlay example Just play with the image and location a little then add some extra info with the location then you should have your multiple custom markers Finally follow the example above to add in the infowindows Hope this helps Reply John June 13 2010 at 3 03 am I encountered the same problem as others when using a for loop to create events for markers Perhaps it is an issue with the API but regardless I remember from my Java days that funny things can happen when references to things are passed around and you don t know what exactly is being done But anyhow I was speculating that with the unwanted behavior we are all getting the event thingy ma bobber must work as follows 1 You register the event 2 Something somewhere stores that you registered an event to that item 3 For the action that it takes upon click it stores a function pointer 4 For the arguments to this function it stores a pointer to the arguments This means that when you put the function in a for loop as so for var i 0 i arr length i google maps events addListener arr i click function ActionFunction arr i It must be the case that ActionFunction is still in the same scope meaning that it still points to the same function with the same argument This means that every time the for loop iterates it gives it a pointer to the same function with the same arguments and you only have the affect of changing what those arguments which are just boxes that hold pointers point to Therefore you get what was pointed to by those parameters on the last iteration And thus with the solution that Ricky came up with it calls a regular function first meaning that pointers to the parameters of this function are pushed on the stack on each iteration and the function is called Each time the event is registered the last even registration is completely out of scope and thus the API is not able to take whatever shortcut it did before Note This is just an attempt for me to rationalize the behavior of the API and is complete speculation on my part I actually have no clue and am in fact not fully satisfied with this explanation as I feel that there is a whole in my logic somewhere So just curious have you ever encountered an issue like this when using the V3 API For those of you who used the version two API s has anyone encountered this issue I am just wondering if this is the intended behavior because it seems so unintuitive Reply Mark June 14 2010 at 11 03 pm Hi This is a great tutorial I was able to implement getting multiple markers on my map but I m having problems with the InfoWindow passing the correct text to the correct marker It basically picks the last text that gets presented and passes it to any marker that is clicked Javascript is not my forte and I have it running as echo statements in PHP Can somebody take a look at this code and help me figure out how to make this work so that each marker gets the correct text Thanks while row mysql fetch array result echo var marker new google maps Marker n echo position new google maps LatLng row latitude row longitude n echo map map n echo icon images photo png n echo n echo var infowindow new google maps InfoWindow n echo content addslashes row description n echo n echo google maps event addListener marker click function n echo infowindow open map marker n echo n This code gives the following results var marker new google maps Marker position new google maps LatLng 32 396989 111 004427 map map icon images photo png var infowindow new google maps InfoWindow content Hill located in West Lambert Lane Park Great 360 views of Tucson and the surrounding area google maps event addListener marker click function infowindow open map marker var marker new google maps Marker position new google maps LatLng 32 420879 110 982298 map map icon images photo png var infowindow new google maps InfoWindow content Another hillside location in Oro Valley Great views to the west for storms in the valley google maps event addListener marker click function infowindow open map marker Which is good but only the last content text gets passed to any marker I click on Thanks for the look Mark Reply sean June 17 2010 at 4 51 pm Hi there I have generated a map with a bunch of markers and ifnoboxes that contain text addresses etc that are visible What I am struggling with is the format to add photographs I have added a field in the phpmysql database mediumblob but am unsure wether I provide the url for the picture or what to do next I am a bit of a noob at this so any help would be great Many thanks Sean Reply Bronwyn June 20 2010 at 6 24 am I have a map with mutiple markers and info windows and found your tutorial instrumental in getting this working I have a sidebar with a list of the places identified and would now like to be able to link to the information window My javascript is very basic how can I do this My map is http www planetengineering com au maptest index html Bronwyn Reply mirekh June 23 2010 at 7 36 am Hi Gabriel anyway a great tutorial well done Can you please clarify how manage a lot of infowindows so that a behaviour is the same as it is in version 2 If I use another variable for each marker infowindow and content then I can see another content for each marker but with click on another infowindows the previous one is still open If I use one varible of marker infowindow and content for each marker than the window s closing work well but I can see only one content Reply Frederick Ricaforte June 24 2010 at 3 25 am mirekh I think you re close You can have multiple variable of marker but you must declare a global infowindow variable But the the trick is to put the declaration of the infowindow inside a function like this var iw Global InfoWindow var map Global Map function initialize map declarations here iw new google maps InfoWindow for loop var mymarker new google maps Marker position myLatLng map map createMyInfoWindow mymarker my content end of for loop function createMyInfoWindow mymarker mycontent google maps event addListener mymarker click function iw setContent mycontent iw open map mymarker This is similar to what Alfred Laggner posted above although simpler Hope this helps Reply Colin Wiseman June 29 2010 at 9 43 am Hello I couldn t get the multiple markers multiple info windows to work no matter what was said above When in a loop for var i 0 i markers length i var marker markers i var infowindow new google maps InfoWindow content holding google maps event addListener marker click function infowindow open map maker This always showed the last marker that was bound to map so the info window always appeared on the last marker Bit of a problem really After reading http bit ly aEtHk1 it showed me the mistake everyone here has made and the actual solution for var i 0 i markers length i var marker markers i var infowindow new google maps InfoWindow content holding google maps event addListener marker click function infowindow setContent this html infowindow open map this Changes in bold As you have all seen the event fires for each marker but as you were calling infowindow open map marker javascript engine s memory location thingymabob not good with names held the last reference to marker But you had passed in the marker to the event so by calling this in place of marker you get what you are looking for Hope this helps someone out Colin Reply Rajeev Jha July 14 2010 at 2 45 pm Hello I am able to display content on Info Window by creating InfoWindow object however i am unable to get default link e g Directions Search nearby Saveto More link I am unable to find any method of InfoWindow object by using that i can show the above utility link in InfoWindow Thanks Rajeev Jha Reply lkool November 11 2011 at 2 31 am Did you ever get this figured out I need the same thing Reply cristina July 29 2010 at 4 33 pm The code given by Colin Wiseman worked for me Thanks Reply cristina July 29 2010 at 4 55 pm Colin Wiseman html must be setted in markes After content holding add html content for var i 0 i markers length i var marker markers i var infowindow new google maps InfoWindow content holding html content Reply Grace August 17 2010 at 1 19 am This is a great tutorial For anyone who is a javascript newb like me who wants to do more than one infowindow remember to rename infowindow and marker in all the places they appear except on the google document parts Creating a marker first marker var marker new google maps Marker position new google maps LatLng 41 21250 174 89934 map map title My workplace Info window var infowindow new google maps InfoWindow content Suck my balls open info window when the map loads infowindow open map marker only open info window when marker is clicked google maps event addListener marker click function infowindow open map marker second marker Creating a marker var marker2 new google maps Marker position new google maps LatLng 41 22531 174 90583 map map title Spider Info window var infowindow2 new google maps InfoWindow content South Park Rules open info window when the map loads infowindow2 open map marker2 only open info window when marker is clicked google maps event addListener marker2 click function infowindow2 open map marker2 Reply shotemba October 1 2010 at 12 28 pm Hi Gabriel Firstly a great book easy to follow enjoyed every chapter Now to my problem regarding infoWindows followed your tutorial on page 90 to create a function closure to ensure each infoWindow has its own respective content but to no avail all my infoWindows display the same content clone of the last infoWindow The only thing I did different from your tutorial was that I was geocoding addresses to get the position for the marker In my case I am not provided with latlng upfront hence I have to geocode the addresses to derive the latlng for the markers Appreciate if you could shed some light thks My code looks something like this function setMarkers map appointments jobHasAppointment for var i 0 i jobAppointments length i use object literal instead var riskAddress jobAppointments i split 0 var comments jobAppointments i split 1 var jobID jobAppointments 1 split 0 geocoder geocode address riskAddress function results status if status google maps GeocoderStatus OK map setCenter results 0 geometry location if jobHasAppointment jobHasAppointments Yes var appointmentMarkerImage new google maps MarkerImage pushPinURL j png var marker new google maps Marker icon appointmentMarkerImage map map title job jobID position results 0 geometry location points push results 0 geometry location else var marker new google maps Marker map map title job jobID position results 0 geometry location function jobID comments marker google maps event addListener marker click function var jobID new google maps InfoWindow var content Comment infowindow setContent content infowindow open map marker jobID comments marker else alert Geocode was not successful for the following reason status Reply Elminson October 7 2010 at 9 34 pm the event is closeclick google maps event addListener infowindow closeclick function map panTo infowindow getPosition Reply Mithun October 13 2010 at 2 45 pm Can some body help be in this info window related question http stackoverflow com feeds question 3921823 I need to have info window content just like that in maps goole com with address and controls like Directions Near by etc Is it possible Reply Guus Jansen January 4 2011 at 6 03 pm I tried to fill an Infowindow with a second map detailmap minimap of a marker position Until now I failed in V3 Is it possible at all in V3 in V2 it was possible If possible can you publish an example The only way I succeed until now was creating an minimap outside the infowindow in another div like the overview example of google thanks for your attention Reply yiannis January 7 2011 at 2 32 am this is my code can somebody please tell why the map doesnt get displayed on my page i ve read the posts but i cant find the problem thank you function initialize var myLatlng new google maps LatLng 38 306219 21 785905 var myOptions zoom 4 center myLatlng mapTypeId google maps MapTypeId ROADMAP var map new google maps Map document getElementById map canvas myOptions var contentString blabla blabla var infowindow new google maps InfoWindow content contentString var marker new google maps Marker position myLatlng map map title Bla google maps event addListener marker click function infowindow open map marker Reply yiannis January 7 2011 at 2 35 am continue Reply Guus Jansen February 22 2011 at 12 51 pm Answer to Yiannis Your question why the map doesnt get displayed on my page I found only a misinterpretation of quotes in your code complete working document I changed every lower than in to have no conflicts in this comment copy code change them back and run in your browser DOCTYPE html html head meta http equiv content type content text html charset UTF 8 title Google Maps JavaScript API v3 Example Info Window Simple style map canvas width 512px height 512px position relative style script type text javascript src http maps google com maps api js sensor false script script type text javascript function initialize var myLatlng new google maps LatLng 38 306219 21 785905 var myOptions zoom 4 center myLatlng mapTypeId google maps MapTypeId ROADMAP var map new google maps Map document getElementById map canvas myOptions var contentString blabla blabla var infowindow new google maps InfoWindow content contentString var marker new google maps Marker position myLatlng map map title Bla google maps event addListener marker click function infowindow open map marker script head body onload initialize table tr td div id map canvas style width 500px height 400px div td td You can see the map now td table body html A bit to late maybe but I hope it helps somebody Reply Mats March 22 2011 at 3 42 pm Hi Thanks for a great article series on the Google map api Have you tried this http google maps utility library v3 googlecode com svn trunk infobox docs examples html Would be great to see an article about infoboxes in use Keep up the great writing Reply Gabriel Svennerberg Post author March 23 2011 at 8 44 am Mats Hi No I haven t tried that out but it looks interesting Another interesting utility library is InfoBubble Good article idea I might just take

    Original URL path: http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ (2016-04-28)
    Open archived version from archive

  • Handcrafted CSS | In usability we trust
    exactly the same in all browser or not pay a visit at www dowebsitesneedtolookexactlythesameineverybrowser com The book also contains some ideas on how to reuse CSS between projects Sort of like building you own lightweight CSS framework like Blueprint CSS and YAML Dan explains the value of a global reset and some basic CSS rules that s usable in every project It s a true joy to read Dans texts The writing style is relaxed but still to the point The examples are thoroughly explained but doesn t feel verbose There s also a laid back humor in the texts that make them even more enjoyable As you probably noticed that I m a big fan of Dan s writing and the truth is that I wish that I could write like that He s just awesome Guest writer This book features guest writer Ethan Marcotte who s been writing a chapter about The Fluid Grid Ethan is a renowned Web designer developer from Airbag Industries This chapter describes how to work with fluid grid based designs It contains both some history of grid based design in print as well as techniques to incorporate them in a web design Included DVD Included in the book I bought was a DVD featuring Dan explaining 10 design guidelines The DVD was pretty OK but didn t feature anything the book didn t include I guess that it s primarily aimed at people that are not web designers and need to be oriented about some core concepts Despite that Dan playing ukulele in the background makes it well worth the time Conclusion If you re interested in starting to use CSS 3 in your designs I highly recommend this book Not so much for that it s chock full of exciting CSS 3

    Original URL path: http://www.svennerberg.com/2009/09/handcrafted-css-book-review/ (2016-04-28)
    Open archived version from archive

  • Google Maps API 3 – Markers | In usability we trust
    as far as I can see the ASP NET renders the HTML in the same way I don t want to bother you unnecessarily but I can post some examples if you re interested Many thanks Andy Reply Gabriel Svennerberg December 7 2009 at 7 28 pm Andy Clark Hi Andy and thanks I haven t seen any examples using ASP NET 3 5 but that shouldn t make any difference Make sure that you have dimensions set for the containing element of the map In my examples it s called div id map div Set its dimensions in your stylesheet like this map width 600px height 400px If that s not the problem post a link and I will try to take a quick look at it Reply David S December 13 2009 at 6 13 am Hi Nice article So far I haven t been able to find any API calls in v3 to duplicate the map clearOverlays function in v2 Are you aware of any way to remove markers Thanks David Reply Sandro Franchi December 27 2009 at 3 27 pm Hi Gabriel a question I m using MapIconmaker in one of my apps using API V2 x just because I need to specify marker colors based in some attribute I m willing to migrate to V3 but is MapIconMaker compatible with V3 or there is any other way perhaps native to specify the markers color and size Thanks in advance Sandro Franchi Reply Gabriel Svennerberg December 28 2009 at 10 20 am David There s no clearOverlays method in v3 so you have to manually keep track of your markers yourself One way of doing that is to keep them in an array To remove all the markers from the map you then loop through the array and remove them one by one See the Google Maps API v3 forum for an example on how to do this Sandro MapIconMaker is currently not available for v3 but I know that at least one person is thinking about porting it to v3 Unfortunately there s no native way of changing colors or size of the icons in v3 either Check out the thread about MapIconMaker in the Google Maps API v3 forum Reply Gilles Tanguay January 20 2010 at 7 25 pm Hi Is is possible to put miltiple and different markers on a google maps I want to be able to place different markers like the logo of the company on the map every company has a different logo and I want to be able to look at them easily Thanks Gilles Reply Gabriel Svennerberg January 20 2010 at 8 17 pm Gilles That s entirely possible You just need to create a new MarkerImage for each marker type and pass it as the value for the marker objects icon property or just pass an url to the appropriate image to the icon property Reply Enrico February 17 2010 at 5 08 pm Thanks very much Gabriel it s long time i was looking such a article so simple and clear Reply Paul April 7 2010 at 3 00 pm Hi Gabriel In my maps there is an option to display places of interest and then to choose which types of location coffee shop gas station etc to pinpoint on the map Is there any way of doing this in either V2 or V3 I couldn t see it when I looked through the docs but then there are a lot of docs to read I would find this very useful as our users who have holiday properties to rent could simply enter lat long of their location into our db and other users wanting to rent could see where these kinds of things are Hmmm simply Is there an API for searching by location centering the map on an address clicking on a button and getting an event with lat long of the map centre Reply Mike April 26 2010 at 11 12 pm Hi Great articles you have provided I am experimenting with adding a tooltip as described but unfortunately it doesn t appear Is there something wrong with my code Thanks Mike function initialize var latlng new google maps LatLng 15 6256915 73 7344704 var options zoom 15 center latlng mapTypeId google maps MapTypeId HYBRID var map new google maps Map document getElementById map options var marker new google maps Marker position new google maps LatLng 15 6191105 73 7351704 map map var marker new google maps Marker position new google maps LatLng 15 6188521 73 7347090 map map title My workplace clickable false icon http google maps icons googlecode com files factory png Reply Gabriel Svennerberg April 27 2010 at 6 31 am Mike After experimenting a bit I found that the property clickable needs to be set to true in order for the title to work Reply Basti May 11 2010 at 10 57 am Hey Gabriel great Tutorial very clear and simple but i ve a question what do you think is the best option do manage a large amount of markers in v3 Can I still use the markermanager or work with xml files And i need to have categories and different zoom levels on my map but i can t find a helpful tutorial do you have any tips for me Thanks a lot Basti Reply Gabriel Svennerberg May 11 2010 at 12 40 pm Basti Yes you can still work with MarkerManager and or XML files There s also a utility library called MarkerClusterer that you can use I don t know of any good tutorial on this for v3 but I ve just finished a chapter on how to do this using the MarkerManager for my upcoming book So if you can wait until August you ll find a tutorial right there Other than that you can check out the examples in the documentation for MarkerManager Reply Brendan May 27 2010 at 3 55 pm Great explanation I have a mini site where you can in put a start point and an end point then Google draws the journey on the map However the default markers are just A and B I need control over these labels Any help would be much appreciated Reply Zwirko May 31 2010 at 11 48 am Is it relatively easy to get a title tooltip to display when you load lots of markers from an xml file I m struggling with this Reply Dominic June 3 2010 at 8 03 am Is it possible to have the tooltips of all markers staying on screen all the time without the need to move mouse over them Reply Jim Buckley BArrett October 13 2011 at 4 25 pm I found this link today http google maps utility library v3 googlecode com svn trunk maplabel examples maplabel html Reply Gabriel Svennerberg June 3 2010 at 11 46 am Dominic No it s not What it does is to attach a title attribute to the html element holding the marker If you want to have a persistent label you need to use some kind of third party solution Check out the official utility libraries currently available for v3 Maybe you could use the InfoBox library to do this Reply mirekh June 22 2010 at 1 57 pm Hi please give me an advice in V3 I would like to specify a zoom level which the marker start to be displayed with There was no problem to do that in version 2 I did that with mm new GMarkerManager map borderPadding 1 mm addMarker marker 2 17 How do that in V3 Reply Gabriel Svennerberg June 22 2010 at 4 24 pm Mirekh There s a v3 compatible version of MarkerManager that you can use to do the exact same thing Check out MarkerManager at the Google Code repository Reply selvaganesan s June 25 2010 at 7 48 am Hi How can i remove the markers from map in api 3 Because i have marker overloading problems please help Reply Dan June 29 2010 at 1 33 am selvaganesan s i ve been just dealing with this problem you have to store your marks in some variable Array is ideal for bunch of marks When you wanna clear them from the map and release from memory call marker setMap null for each of them var map new google maps Map element options var marker function addMarker title lat lng var m new google maps Marker position new google maps LatLng lat lng map map title title marker push m function clearMarks while m marker pop m setMap null Reply Wayne Sallee June 29 2010 at 7 14 pm 20 April 27th 2010 at 6 31 by Gabriel Svennerberg Author comment Mike After experimenting a bit I found that the property clickable needs to be set to true in order for the title to work So shouldn t it be changed to clickable in the instructions Wayne Sallee Wayne WayneSallee com Reply blindfish July 9 2010 at 2 08 pm Thanks This is a really useful article I ve now managed to read data from an XML file and display markers based on categories with options to show and hide each category I m currently not using MarkerManager to manage my markers it didn t seem to work happily with my code but instead have added a listener to each marker to determine whether it is displayed at any given zoom level That doesn t seem entirely efficient to me as I m assuming that markers that are not visible in the map area at a given zoom level i e they re off screen are still using resources I guess I ll have to persevere with MarkerManager in order to address this assuming the map renderer doesn t handle it I have one question that I haven t seen addressed anywhere yet Roughly how many markers can the system handle display at any one time From the MarkerManager documentation it sounds like it might be up to 200 Are there any recommended limits we should stick to I m still at the research stage and don t know how much data I m going to be working with so just want some idea of how lazy I can be with optimisation Reply Billy September 7 2010 at 1 53 am Hi Gabriel I wantt o thank you for this I have been trying to put together the code for a google map that I will be putiing on a site I am working on I dont know if you can assit hoefully you might what I am looking to do it place a marker and shadow on map this I can do but having trouble trying to workout to position the shadow to sit evenly behid the main maker I have looked at many tuts but cab seem to get this any help be grateful for a newbie at map making Reply James September 22 2010 at 11 25 pm Thanks Gabriel so easy to understand And thank you also for your comment on the fitBounds method worked a charm Reply hanifa maricar October 8 2010 at 5 43 pm Gabriel I ve just order your book from amazon I just want to ask you if there is any merit in learning KML I am using not asp net and putting up with messy Javascript Just your opinion Respectfully Hanifa Reply Gabriel Svennerberg October 8 2010 at 10 52 pm Hanifa Personally I haven t been using KML a lot but I suppose it has its benefits especially if you plan on developing for Google Earth as well Its just an XML format so it s really no big deal to learn Reply shitao January 8 2011 at 10 35 am hello every now I want make a Mark with description words besides just like labelMarker in API2 how to program thanks from china Reply shitao January 8 2011 at 10 38 am hello every expert now I want make a Mark with description words besides just like labelMarker in API2 how to program attention not the property title thanks from china Reply genti January 10 2011 at 6 00 pm Hi i need would to display cached mysql markers on a map depending on a range in meters that users can choose Any idea about resolve this Reply Gabriel Svennerberg Post author January 10 2011 at 11 20 pm shitao Check out the utility libraries for v3 BothInfoBox and MarkerWithLabel might be of interest for you google maps utility library v3 Reply David Underhill January 16 2011 at 10 34 am Thanks Gabriel this is just what I was looking for but I d overlooked it in the docs oops Reply Ygam Retuta March 1 2011 at 9 53 am Hi I have just started reading your book but so far have not found a solution in what I m trying to do I am trying to duplicate an icon with the following code http jsbin com ijujo3 edit however I can t get the icon to display using an MarkerImage object What I want to do is to duplicate the marker icon and scale it then assign it to the babyMarker icon any ideas Reply Ygam Retuta March 2 2011 at 3 31 am I have already solve the problem described above regarding duplicating markers Here is the solution http www ygamretuta com 2011 03 duplicating and scaling an existing marker icon in google maps v3 Reply Gabriel Svennerberg Post author March 2 2011 at 1 12 pm Nice job Ygam I m sorry I didn t answered your question in time One note on your solution The getIcon method of the Marker object is documented Look here in the API documentation Reply bondeth April 4 2011 at 11 38 am I want to be able search street number and street name in google map api 3 So anyone have any idea to do it or some tutorial Thank in advance Reply Gabriel Svennerberg Post author April 4 2011 at 12 21 pm bondeth Check out the part about Geocoding in the Google Maps API documentation Reply SM April 6 2011 at 1 54 pm NOBODY at the entire friggin internet has talked about how to create multiple markers and deleting them upon choice If I have three markers and I want to remove for instance only the first one with say rightclick how the h k do you do that Me and my friend have been sitting on this problem in v3 for a week now without finding anything Google sucks when it comes to API s Come on this problem can t be too hard to foresee Christ gonna do harakiri soon Reply SM April 7 2011 at 10 42 am I AM AN IDIOT Here is answer to this meticular problem which wasn t a problem at all Gooosh Every marker must have it s own reference This reference must be a unique name Thus can you listen for this special reference when it fires the desired event function init var m1 Latlng new google maps LatLng 25 363882 131 044922 var m2 Latlng new google maps LatLng 22 363882 131 044922 var myOptions zoom 4 center m1 Latlng mapTypeId google maps MapTypeId ROADMAP var map new google maps Map document getElementById map canvas myOptions var marker1 new google maps Marker position m1 Latlng draggable true title Marker 1 var marker2 new google maps Marker position m2 Latlng draggable true title Marker 2 google maps event addListener marker1 rightclick function event marker1 setMap null google maps event addListener marker2 rightclick function event marker2 setMap null To add the marker to the map call setMap marker1 setMap map marker2 setMap map Reply Edward April 7 2011 at 6 48 pm Hi I can t get the custom marker to display in Chapter 6 What am I doing wrong Reply Gabriel Svennerberg Post author April 8 2011 at 12 02 am Edward Hard to say Can you provide a link to your code You can also download all the examples in the book from the book page and compare that to what you ve written yourself Reply oven lu April 8 2011 at 7 45 am Hi I am a C programmer here is my problem if I Click the marker I want the map change center but I want use the LatLng witch is find by marker to set the map center now I can t find the LatLng Reply Gabriel Svennerberg Post author April 8 2011 at 8 00 am lu Here s one way of doing it google maps event addListener marker click function e var latLng e latLng Reply Edward April 8 2011 at 9 37 am Hi Thanks for the reply heres my JS code no recycle marker shadow function window onload function var options zoom 3 center new google maps LatLng 37 09 95 71 mapTypeId google maps MapTypeId ROADMAP var map new google maps Map document getElementById map options var recycle new google maps MarkerImage img recycle png var shadow new google maps MarkerImage img shadow png var marker new google maps Marker position new google maps LatLng 40 756054 73 986951 map map icon recycle shadow shadow Is it something obvious Thanks again Reply Gabriel Svennerberg Post author April 10 2011 at 10 08 am Edward Your code looks good except for the trailing comma in the options object It will make IE choke But I don t think that your problem Check the paths to the images recycle png and shadow png I suspect that these might be wrong Reply Edward Kemp April 14 2011 at 11 15 am Hi Thanks for your help Fixed this now Another question sorry when creating the random markers for example 9 1 when the map is set to zoom 3 the centre moves to the middle

    Original URL path: http://www.svennerberg.com/2009/07/google-maps-api-3-markers/ (2016-04-28)
    Open archived version from archive

  • I’m writing a book about Google Maps | In usability we trust
    July 18 2009 at 7 44 pm I m glad you re doing this I ll be the first in line to buy it The most valuable to me would be an annotated reference giving the syntax and if there is any subtlety to it at all an overarching explanation of why it s there and a short example of how it s used Once I have this brief information I m usually up and running with it and it s surprising how often this information is either missing or unclear in computer texts lycka till Reply Magic Touch July 18 2009 at 10 04 pm Good luck Gabriel Have you chosen how to publish the book We publish ours with Lulu Its a low cost and easy way to start You can progress to a proper publisher later once sales are moving along nicely Some possible content for your book check out our tool Magic Touch which works like Google Maps except for any image It takes huge images and cuts them into 256px tiles so that they can be zoomed panned quickly There is no API yet but there are quite a few customisations available and many more to come Reply Gabriel Svennerberg July 19 2009 at 9 33 pm parxier There will be a chapter on marker clustering But I m not sure yet if I m going to include any server side clustering Lance Thanks for the encouragement Tom That s a really good idea I m also planning to do a cheat sheet I myself often find that very valuable Magic Touch Thanks for the tip I ll be sure to check that out Also Magic Touch looks really cool Me and a friend actually discussed that kind of solution just a couple of days ago Nice to see an implementation of it God job Reply Gogo Relation July 21 2009 at 4 10 pm Nice idea It would be the first Google Maps book in the world I am sure that lots of people would buy it Wsh you good luck with your book Reply Tim July 23 2009 at 4 02 pm Excellent Reply Ines August 7 2009 at 12 21 pm Great idea I m looking forward to it Maybe our clustering solution http www geocubes com for dealing with large amounts of markers could be interesting to analyse and compare Reply Matt August 13 2009 at 7 16 pm Yes that is definitely a good idea I could use such a book right now while I am learning the Maps API Lycka till Reply Kevin Macdonald August 16 2009 at 3 44 pm Hello I d like to point you to two cluster implementations that manage the display of 2 050 000 markers with real time responsiveness http spatialdatabox com million marker map million marker map html http spatialdatabox com heat map heat map html I am working on a reimplementation of the million marker map to provide a more appealing

    Original URL path: http://www.svennerberg.com/2009/07/im-writing-a-book-about-google-maps/ (2016-04-28)
    Open archived version from archive

  • Mobile First Person User Interfaces | In usability we trust
    and it will tell you what it is who built it etc imposing the information as a layer over the reality Future of Internet Search Mobile version Up till now this has merely been concept ideas for future technology like the Futuristic Glass above but it s now becoming real For the Google Android platform there s already working prototypes like for example this one It s called Layar and claims to be the first mobile Augmented Reality browser If you want to read more about this Luke Wroblewski has written two articles on the subject showing examples from both the iPhone and the Android platform including YouTube videos of the applications in action iPhone with a Compass First Person UIs First Person UIs on Android Quick tips Interaction design Mobile UX Previous post Google Maps API 3 Map settings Next post I m writing a book about Google Maps 2 Comments kitchenaid July 13 2009 at 11 17 am This is cool man I love it Reply Pepito June 16 2011 at 6 21 pm great site keep it up the good work Reply Leave a Reply Cancel reply Your email address will not be published Author Email Website

    Original URL path: http://www.svennerberg.com/2009/06/mobile-first-person-user-interfaces/ (2016-04-28)
    Open archived version from archive

  • Google Maps API 3 – Map settings | In usability we trust
    ZOOM PAN This is the large control that lets you to both zoom and pan the map Here s some example code on how to display the large control zoom pan var options zoom 6 center new google maps LatLng 57 8 14 0 mapTypeId google maps MapTypeId ROADMAP navigationControlOptions style google maps NavigationControlStyle ZOOM PAN scaleControl boolean This property determines whether the scale control will be displayed or not Set it to true to display the control and false to hide it This control is not displayed by default so if you want it to show you have to explicitly set this property to true The scale control is typically positioned in the lower left corner of the map and are used to get a sense of the scale of the map It looks like this scaleControlOptions You can control how the scale control will be displayed with the help of this property It currently only has one option which is STANDARD so there s really not much you can do but this might change in future releases keyboardShortcuts boolean There are some keyboard shortcuts for controlling the map These are the arrowkeys for panning and for zooming Default value is true If set to false it will disable the keyboard shortcuts Map div behavior The Map div is the HTML element that contains the map Typically it s a with id map or something similar There are some properties that controls the behavior of this noClear boolean The default setting of this is false and what it does is to clear the content of the div that contains the map If set to true it will not clear the initial content of it backgroundColor string This property also affects the map div It sets the color of the div s background which shows when you pan the map and before the map tiles have been loaded noResize boolean Default value is false If set to true it prevents the map from doing automatic resize checking Cursor behavior Finally there are a couple of properties to control how the cursor will look like These are draggableCursor Sets the name or URL of the cursor that is displayed on a draggable object draggingCursor Sets the name or URL of the cursor that is displayed when an object is dragged Note As of the time of writing these properties doesn t seem to work properly This will hopefully be fixed in a near future Live Demo I ve put together a Live Demo where you can try out some of the properties of the map and see how they affect it Try out the Live Demo Conclusion In this article we ve examined the properties available when initializing a map in Google Maps API 3 These properties affect the look and behavior of the map There are additional methods that can be used to alter these properties but they will be covered in a future article In the next article we

    Original URL path: http://www.svennerberg.com/2009/06/google-maps-api-3-map-settings/ (2016-04-28)
    Open archived version from archive

  • Javascript Performance Tips | In usability we trust
    your code run faster Loops By doing some really easy modification to your loops you can get a 50 performance boost What it boils down to is to Decrease amount of work per iteration Decrease number of iterations You should also avoid using For in loops and for each loops and all the function based loops found in Javscript libraries like jQuery and YUI These takes up to 8 times longer to run than regular for loops DOM In this part Nicholas amnong other things talks about HTMLCollections and how slow they are The reason being that they are dynamic by nature For example just looping through an HTMLCollection takes up to 68 times longer in IE than it takes to loop through an array Fortunately he also provides ways to remedy this He also describes how to avoid unnecesary reflow of the web page The video This video gave me so much new information on how to optimize my Javascript code This is definitely the best talk I ever seen on the subject If you re at all interested in Javascript you should definitely watch it Watch the video on YouTube com Quick tips Javascript Performance Previous post Free E book on Multi Touch Technologies Next post Google Maps API 3 Map settings 1 Comment Tyler Brinks January 18 2012 at 8 35 pm Thanks for putting this post together I love the topic of performance I m big on JavaScript performance and website performance as a whole I ve been building software for years and I notice performance often gets neglected so I built something that helps find and address most every major performance issue for every page in an entire websites http www pagelabs com I now use it for testing all of my client websites I

    Original URL path: http://www.svennerberg.com/2009/06/javascript-performance-tips/ (2016-04-28)
    Open archived version from archive



  •