Jump to content
Larry Ullman's Book Forums

Ralph3616

Members
  • Content Count

    8
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Ralph3616

  • Rank
    Newbie
  1. Absolutely . I thank you for your perseverance and work you have put into this, it is very much appreciated.
  2. This code opens a map in a window of 500 x 600. As I do not know what size / shape of window my user has in his/her browser I can not guess with a predefined number without having either too small or too large a map, I know it will open with both vertical or horizontal scroll bars but want to avoid those. I want my map to be 100% of the available window. If my user has his browser set at full screen or minimized when he opens my map it will cover the entire page / window of his browser
  3. Darn.. Because I had adjusted the pixel size of my JS code to match a full screen when I inserted your example code I thought it worked. Either I am putting your example / fix in the wrong spot or the code in the markers JS is overriding your solution. May I ask specifically where you would insert your example code and what do I do with the code in the markers.js. $("#map").css({ height: 500, width: 600 }); Sample code from http://www.sitepoint...aps-api-jquery/ <!DOCTYPE html> <html> <head> <title>Google Maps</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="js/markers.js"> </script> </head> <body><div id="map"></div> <div ><input type="button" id="showmarkers" value="Show Markers" /></div> </body> </html> markers.js $(document).ready(function() { $("#map").css({ height: 500, width: 600 }); var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267); MYMAP.init('#map', myLatLng, 11); $("#showmarkers").click(function(e){ MYMAP.placeMarkers('markers.xml'); }); }); var MYMAP = { map: null, bounds: null } MYMAP.init = function(selector, latLng, zoom) { var myOptions = { zoom:zoom, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP } this.map = new google.maps.Map($(selector)[0], myOptions); this.bounds = new google.maps.LatLngBounds(); } MYMAP.placeMarkers = function(filename) { $.get(filename, function(xml){ $(xml).find("marker").each(function(){ var name = $(this).find('name').text(); var address = $(this).find('address').text(); // create a new LatLng point for the marker var lat = $(this).find('lat').text(); var lng = $(this).find('lng').text(); var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng)); // extend the bounds to include the new point MYMAP.bounds.extend(point); var marker = new google.maps.Marker({ position: point, map: MYMAP.map }); var infoWindow = new google.maps.InfoWindow(); var html='<strong>'+name+'</strong.><br />'+address; google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(MYMAP.map, marker); }); MYMAP.map.fitBounds(MYMAP.bounds); }); }); }
  4. Yes that will work for me. Thank you for staying with me on this problem, very much appreciated.
  5. I want as much map showing as I can. So I want it to be full screen in what ever size the window is. I will need some (10px?) for the Show Marker Tab which in the sample is below the map, This could be moved onto the map if it was possible (under the current map style Map, Satellite?) and save the space for more map. I appreciate you taking this project on.. Thank you
  6. Thank you I would appreciate it if you could but I think you are right about me picking a different example to modify / use. Except for the size issue it all works so I am reluctant to start over... If it is a lot of work /time on your part just leave it and I will reconsider my options. I was hoping for a quick and easy solution... it seems not. I have found similar questions on how to change this very sample and none with a solution.
  7. Thank you HartleySan. I have tried your ideas and also those in the link. Unfortunately none of the combinations I tried would work for me. When I get a full screen my map does not show. My level of understanding the code is very low and limited to cutting and pasting examples. Your solution may well work except that I may be placing it in the wrong spot or missing a simple bracket. I was hoping for a simple replacement of the initial *.js code however it appears that this may not be easy /possible. $("#map").css({ height: 768, width: 1024 }); I may have to revert to your last solution but the idea of using an *xml file to populate my markers and the fact that the initial map does not show the markers until a button is clicked fits well with my design. I appreciate your help.. again, thank you
  8. I am trying to incorporate a Google map in my website. From https://developers.g...cript/examples/ I have made my map and this code gives me a full screen map. <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> I can not get markers to work in this so am using from http://www.sitepoint...maps-api-jquery something that works with my markers.. but only in a window. It seems the code for this comes from marker.js and while I can change the pixal size I can not go 100% $("#map").css({ height: 768, width: 1024 }); While searching on how to do this (make it 100%) I came accross this forum and hope someone here can help. How can I make my map open at 100% of my browser window? Thank you for your time.
×
×
  • Create New...