Hi, this is the mailing list for Google Charts. Unfortunately, I do not know enough about the Maps API to help you, but you can post your question to the Google Maps mailing list<https://groups.google.com/forum/#!forum/google-maps-js-api-v3>, and hopefully they'll be able to help you. Good luck!
- Sergey On Wed, Dec 11, 2013 at 12:55 PM, Qurat Haider <[email protected]>wrote: > hi, i am using Google maps getting my data from mysql and it is working > fine now i want to add the info window in my code. i have tried to add the > info window code but its not working. if any one knows how to add info > window which display my device and time from my database please tell me. > here is my code: > > <script type="text/javascript"> > > var map, setArrows; > > function ArrowHandler() { > this.setMap(map); > // Markers with 'head' arrows must be stored > this.arrowheads = []; > } > // Extends OverlayView from the Maps API > ArrowHandler.prototype = new google.maps.OverlayView(); > > // Draw is inter alia called on zoom change events. > // So we can use the draw method as zoom change listener > ArrowHandler.prototype.draw = function() { > > if (this.arrowheads.length > 0) { > for (var i = 0, m; m = this.arrowheads[i]; i++) { > m.setOptions({ position: this.usePixelOffset(m.p1, m.p2) }); > } > } > }; > > // Computes the length of a polyline in pixels > // to adjust the position of the 'head' arrow > ArrowHandler.prototype.usePixelOffset = function(p1, p2) { > > var proj = this.getProjection(); > var g = google.maps; > var dist = 12; // Half size of triangle icon > > var pix1 = proj.fromLatLngToContainerPixel(p1); > var pix2 = proj.fromLatLngToContainerPixel(p2); > var vector = new g.Point(pix2.x - pix1.x, pix2.y - pix1.y); > var length = Math.sqrt(vector.x * vector.x + vector.y * vector.y); > var normal = new g.Point(vector.x/length, vector.y/length); > var offset = new g.Point(pix2.x - dist * normal.x, pix2.y - dist * normal.y); > > return proj.fromContainerPixelToLatLng(offset); > }; > > // Returns the triangle icon object > ArrowHandler.prototype.addIcon = function(file) { > var g = google.maps; > var icon = { url: "http://www.google.com/mapfiles/"; + file, > size: new g.Size(24, 24), anchor: new g.Point(12, 12) }; > return icon; > }; > > // Creates markers with corresponding triangle icons > ArrowHandler.prototype.create = function(p1, p2, mode) { > var markerpos; > var g = google.maps; > if (mode == "onset") markerpos = p1; > else if (mode == "head") markerpos = this.usePixelOffset(p1, p2); > else if (mode == "midline") markerpos = g.geometry.spherical.interpolate(p1, > p2, .5); > > // Compute the bearing of the line in degrees > var dir = g.geometry.spherical.computeHeading(p1, p2).toFixed(1); > // round it to a multiple of 3 and correct unusable numbers > dir = Math.round(dir/3) * 3; > if (dir < 0) dir += 240; > if (dir > 117) dir -= 120; > // use the corresponding icon > > var icon = this.addIcon("dir_" +dir+ ".png"); > > var marker = new g.Marker({position: markerpos, > map: map, icon: icon, clickable: false > }); > > if (mode == "head") { > // Store markers with 'head' arrows to adjust their offset position on zoom > change > marker.p1 = p1; > marker.p2 = p2; > marker.setValues({ p1: p1, p2: p2 }); > this.arrowheads.push(marker); > } > }; > > ArrowHandler.prototype.load = function (points, mode) { > for (var i = 0; i < points.length-1; i++) { > var p1 = points[i], > p2 = points[i + 1]; > this.create(p1, p2, mode); > } > }; > > // Draws a polyline with accordant arrow heads > function createPoly(path, mode) { > var poly = new google.maps.Polyline({ > strokeColor: "#000fff", > strokeOpacity: 0.5, > strokeWeight: 4, > map: map, > path: path }); > > setArrows.load(path, mode); > return poly; > } > > // Create the map > window.onload = function() { > > var g = google.maps; > var center = new g.LatLng(0,0); > var opts_map = { > center: center, zoom: 13, > streetViewControl: false, > mapTypeId: "roadmap" // g.MapTypeId.ROADMAP > }; > map = new g.Map(document.getElementById("map"), opts_map); > > var liste_des_points=[<?php echo $listeDesPoints; ?>]; > > setArrows = new ArrowHandler(); > var i=0,li=liste_des_points.length; > while (i < li) { > liste_des_points[i] = new google.maps.LatLng(liste_des_points[i][0], > liste_des_points[i][1]); > i++;} > createPoly(points, "onset"); > i++; > } > > g.event.addListenerOnce(map, "tilesloaded", function() { > > }); > }; > > > </script> > > > -- > You received this message because you are subscribed to the Google Groups > "Google Visualization API" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/groups/opt_out. > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/groups/opt_out.
