> > I was finally able to get it working. Now I need to work on the sidebar > nav and grouping the icons.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> Gmap API v3 Sample</title> <script type='text/javascript' src="http://maps.google.com/maps/api/js?sensor=false&.js";></script> <style type='text/css'> #map_canvas{ width: 400px; height: 400px; } </style> </head> <body> <table width=90% border=1> <tr> <td width=10 id='map_canvas'> </td> <td width=10> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <P>Right click to get coords</p><br/> <a href='#' onClick="gotoPoint(1);">Click for marker 1</a><br/> <a href='#' onClick="gotoPoint(2);">Click for marker 2</a> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> </td> </tr> </table> <script type='text/javascript'>//<![CDATA[ var moonTypeOptions = { getTileUrl: function(coord, zoom) { var normalizedCoord = getNormalizedCoord(coord, zoom); if (!normalizedCoord) { return null; } var bound = Math.pow(2, zoom); return 'http://karl-med/gmap/images' + '/' + zoom + '/' + normalizedCoord.x + '/' + (bound - normalizedCoord.y - 1) + '.png'; }, tileSize: new google.maps.Size(256, 256), maxZoom: 3, minZoom: 0, radius: 1738000, name: 'Skyrm Map' }; var moonMapType = new google.maps.ImageMapType(moonTypeOptions); // ============================= var MyMarkers = [[1.44204833, 1.40340333, "hi"], [1.49261667, 12.92661167, "bye"]]; //var infowindow = []; var marker = []; var MyCenter = new google.maps.LatLng(0.44204833, 0.40340333); var mapOptions = { zoom: 2, center: MyCenter, streetViewControl: false, mapTypeControlOptions: { mapTypeIds: ['moon'] } } var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); map.mapTypes.set('moon', moonMapType); map.setMapTypeId('moon'); window.onload = initialize() // ========================================================================================== // ========================================================================================== // ========================================================================================== function initialize() { google.maps.event.addListener(map, 'rightclick', function(event) { var lat = event.latLng.lat(); var lng = event.latLng.lng(); // populate yor box/field with lat, lng alert("Lat=" + lat + "; Lng=" + lng); }); PlaceMarker(MyMarkers); } function PlaceMarker(MyMarkers) { for (var i = 0; i < MyMarkers.length; i++) { createMarker(MyMarkers[i][0], MyMarkers[i][1], MyMarkers[i][2]); } } function createMarker(lat, lon, html) { var newmarker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lon), map: map, title: html }); newmarker['infowindow'] = new google.maps.InfoWindow({ content: html }); google.maps.event.addListener(newmarker, 'mouseover', function() { this['infowindow'].open(map, this); this['infowindow'].close; }); google.maps.event.addListener(newmarker, 'Click', function() { Alert("ji"); }); //Do I need this??? //marker.push(newmarker); } function gotoPoint(myPoint){ map.setCenter(new google.maps.LatLng(marker[myPoint-1].position.lat(), marker[myPoint-1].position.lng())); marker[myPoint-1]['infowindow'].open(map, marker[myPoint-1]); } // Normalizes the coords that tiles repeat across the x axis (horizontally) // like the standard Google map tiles. function getNormalizedCoord(coord, zoom) { var y = coord.y; var x = coord.x; // tile range in one direction range is dependent on zoom level // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc var tileRange = 1 << zoom; // don't repeat across y-axis (vertically) if (y < 0 || y >= tileRange) { return null; } // repeat across x-axis if (x < 0 || x >= tileRange) { x = (x % tileRange + tileRange) % tileRange; } return { x: x, y: y }; } //]]> </script> </body> </html> -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/iqCmAw0WzSYJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
