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 different traverse methods in jQuery - Exemple page
    how the jQuery methods add filter and find work Code run Testarea Lorem ipsum dolor sit amet consectetur adipiscing elit Sed dictum aliquam pretium In tincidunt feugiat felis ut feugiat elit tincidunt et Lorem ipsum dolor sit amet consectetur adipiscing elit Sed dictum aliquam pretium In tincidunt feugiat felis ut feugiat elit tincidunt et Item 1 Item 2 Item 3 A link Result from the jQuery selection This example is

    Original URL path: http://www.svennerberg.com/examples/add_find_filter/ (2016-04-28)
    Open archived version from archive


  • Programming | In usability we trust
    on a Google Map called GPolyline In this article I will show you how to use these and how to deal with potential performance issues when the polylines gets more complex Continue reading ASP NET MVC and JSON October 22 2008 Gabriel Svennerberg 3 Comments In the AJAX community JSON have become the preferred way of sending and receiving data That s not surprising since it s lightweight fast and easy to understand Also since it s a subset of Javascript it s familiar territory for Javascript coders In the ASP NET MVC Framework passing JSON from the server to the client script is almost too easy In this article I will walk you through the code required to make it work Continue reading User Controls in ASP NET MVC Preview Release 5 October 3 2008 Gabriel Svennerberg 6 Comments I ve had a little trouble finding out how to use User Controls in the ASP NET MVC Framework and how to pass data to it I haven t been able to find a single article that clearly explains how to do this so I thought I ll do a little write up on the topic Continue reading jQuery ASP NET true October 1 2008 Gabriel Svennerberg 0 Comments jQuery is going to be a part of Visual Studio This is a great and I must say an unexpected development of things For me personally who s already using jQuery along with ASP NET the main difference will be the intellisense annotation support for jQuery This will be a welcomed enhancement of my development environment Needless to say the asp net team at Microsoft will also build ready to use controls in the ASP NET AJAX Control Toolkit that builds upon jQuery According to Scott Guthrie there will be a

    Original URL path: http://www.svennerberg.com/tag/programming/ (2016-04-28)
    Open archived version from archive

  • The difference between add(), find() and filter() in jQuery | In usability we trust
    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 your

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

  • Google Maps API 3 – InfoWindows | In usability we trust
    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 you

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

  • Google Maps API 3 – InfoWindows | In usability we trust
    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 you up

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

  • Google Maps API 3 – InfoWindows | In usability we trust
    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 you up

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

  • Google Maps API 3 – InfoWindows | In usability we trust
    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 you up on

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

  • Books | In usability we trust
    Comments Dan Cederholms latest book Handcrafted CSS with the subtitle More Bulletproof Web Design is an enjoyable read and delivers some interesting advice on how to leverage your designs with the power of CSS3 Continue reading About me My name is Gabriel Svennerberg and I m a UX Designer Frontend Specialist and Author from Sweden More about me I m located in Växjö Sweden but am helping clients around the

    Original URL path: http://www.svennerberg.com/tag/books/ (2016-04-28)
    Open archived version from archive



  •