Search code examples
javascriptgoogle-mapsgoogle-maps-api-3infowindowinfobubble

Google Maps API Infowindow


I've got this Google Map (works on my website, can't get it to work in jsfiddle?)

jsfiddle.net/9ZcwX/1/

I want to use an infobubble instead of the infowindow because I cant style the infowindow at all with css it seems. Everytime I try to add a new infobubble it just crashes the map. Not having much luck with existing questions.


Solution

  • Well, there were following issues in your fiddle:

    • You didn't included google maps javascript file.
    • You didn't provided the dimension to the map container which is important for rendering of map.
    • You place the DomListener code before the init code and it was executing before the html was loaded and hence the code failed to find the div with the given ID

    Your code works fine after the modifications.

    Here is the demo : http://jsfiddle.net/lotusgodkk/x8dSP/3605/

    I didn't modified anything except reodering the code. I placed this code: google.maps.event.addDomListener(window, 'load', init);

    at the end instead of the beginning and added the necessary javascript file.

    And added the following CSS:

    #map_canvas {
         height: 500px;
         width: 500px;
    }