javascript - How to create CSS styled dom element inside Google Maps InfoWindow? -


I tried to create a custom element inside Google Map information but it does not work. I've linked CSS and JavaScript properly.

  function open window (map, marker) {var contentString = '& lt; Div id = "content" & gt; + '& Lt; Div id = "cyanotis" & gt; '+' & Lt; / Div & gt; '+' & Lt; H1 id = "first hadding" class = "first hadding" & gt; Location # 1 & lt; / H1> '+' & Lt; Div id = "bodyContent" & gt; '+' & Lt; Div class = "panel panel-default" id = "spr_32" & gt; & Lt; Div class = "panel-title" & gt; & Lt; H4 square = "panel-title" & gt; With button & lt; / H4 & gt; & Lt; Div class = "panel-title-content" & gt; & Lt; A href = "#" class = "btn btn-success btn-xs" & gt; Such as & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "panel-body" & gt; Place is in place and this is not a stupid place. & Lt; / Div & gt; & Lt; / Div & gt; '+' & Lt; / Div & gt; '+' & Lt; / Div & gt; '; Var infowindow = new google.maps.InfoWindow ({content: contentString, maxwidth: 600}); Google.maps.event.addListener (Marker, 'Click', function () {infowindow.open (map, marker);}); }  

Are you setting up your marker? Since on the click function, it expects "marker" as an argument. You have to set your marker variable above your click event listener. I write my solution for these types of custom maps, this maype helps:

  / * 1 - Set options and styles * / Var mapId = "mapId"; Ver latitude = 40.98680 9; Ver latitude = 29.021807; Var map = "your map name"; Var zoom level = 16; Var iconUrl = 'http: //path/to/googleMaps/logo.png'; Var scrollable = false; Var disabledDefaultUI = false; Var draggableMarker = false; Var marker; Var map; ContentString = '& lt; Div id = "mapContent" & gt; + '& Lt; Div id = "SiteNotice" & gt; + '& Lt; / Div> + '& Lt; H1id = "firstHeading" class = "firstHeading" & gt; Lorem ipsum & lt; / H1> '+' & Lt; Div id = "bodyContent" & gt; '+' & Lt; P & gt; & Lt; P & gt; Lorem ipsum & lt; / B & gt ;, shed aMET '+' & lt; / P & gt; '+' & Lt; / Div & gt; '+' & Lt; / Div & gt; '; Var styles = [// custom styles]; / * 2 - Up * / Initialize your options () {start map with zoom: zoomLevel, scrollwheel: scroll, center: new google.maps.LatLng (latitude, longitude), mapTypeControlOptions: {mapTypeIds [MapName ]}, DisableDefaultUI: disableDefaultUI, panControl: wrong, zoom control: true, scale control: true}; Var div = document.getElementById (mapId); Var map = new google.maps.Map (div, mapOptions); Var stylemap type = new google.maps.StyledMapType (style, {name: mapName}); Map.mapTypes.set (map name, stylemap type); Map.setOptions ({styles: styles}); / ************ MARKER ************************************************************************************** **************************************************************************************************** ** / marker = new google.maps.marker ({map: map, dragable: draggable marker, icon: iconUrl, animation: google.maps.Animation.DROP, status: new google.maps.LatLng (latitude, longitude)} ); / ******************************** info window *************************************************************** *** / var infowindow = new google.maps.InfoWindow ({content: contentString}); / * If you start Infowindow on window load * / infowindow.open (map, marker); Google.maps.event.addListener (Marker, 'Click', function () {infowindow.open (map, marker);}); } Google.maps.event.addDomListener (window, 'load', start);  

Hope this helps


Comments

Popular posts from this blog

sqlite3 - UPDATE a table from the SELECT of another one -

c# - Showing a SelectedItem's Property -

javascript - Render HTML after each iteration in loop -