phdphd Posted December 30, 2015 Share Posted December 30, 2015 Hi all, I managed to display multiple Google maps on same page. Here is my sample code (mix of html/js): <body> <script src="https://maps.googleapis.com/maps/api/js"></script> <script> function initialize(param1,param2,param3) { var mapCanvas = document.getElementById(param1); var mapOptions = { center: new google.maps.LatLng(param2, param3), zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions) }; </script> <div id="map_canvas"><script>initialize('map_canvas',51.5403,-2.5463);</script></div> <div id="map_canvas2"><script>initialize('map_canvas2',41.5403,-2.5463);</script></div> </body> This works. However it does not if I follow the best pratice of putting the js code at the end, right before the closing body tag. (On the actual page, the number of maps is not fixed, and varies upon user's choices.) Thanks for your help! Quote Link to comment Share on other sites More sharing options...
phdphd Posted December 30, 2015 Author Share Posted December 30, 2015 I guess this is because the JS is not dependent on an event being trigged. Quote Link to comment Share on other sites More sharing options...
requinix Posted December 31, 2015 Share Posted December 31, 2015 Step 0: Fix your HTML and code. - Use type="text/javascript"s on - Name your function parameters with something meaningful. "param1" and "param2" and "param3" are worthless names. - The include for the maps API should be in the , if at all possible. Same for the initialize() function. Step 1: Get rid of those two <div id="map_canvas"></div> <div id="map_canvas2"></div>Step 2: Make sure your initialization code can work with particular elements and does not (eg) cause output when executed. Your function already does that with the param1 parameter. Step 3: Exactly what you do here varies by how you want to do it. You said something about the number of maps varying? Then I suggest making your page look like <div id="map_canvas_0"></div> <script type="text/javascript">initialize("map_canvas_0", 51.5403, -2.5463);</script>Repeat that sort of thing for each map to display. "But that doesn't follow the best practice of everything being just before the closing !" True, but the purpose of the best practice is (a) to keep code in a logical place and not scattered around the document and (b) because you can't run code immediately if it uses an element defined later down the page. Reasons behind my suggestion: - Lends itself to being generated in a loop - Puts the code and the map container in very close proximity to each other - initialize() does not set up the map immediately but on load (as it should be) The end result is basically <html> <head> ... <script src="https://maps.googleapis.com/maps/api/js"></script> <script type="text/javascript"> function initialize(canvas, lat, long) { $(function() { // for jquery. use whatever method to cause the function to be executed only after page/DOM load var mapCanvas = document.getElementById(canvas); var mapOptions = { center: new google.maps.LatLng(lat, lng), zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(mapCanvas, mapOptions); }); } </script> </head> <body> <div id="map_canvas_0"></div> <script type="text/javascript">initialize("map_canvas_0", 51.5403, -2.5463);</script> <div id="map_canvas_1"></div> <script type="text/javascript">initialize("map_canvas_1", 41.5403, -2.5463);</script> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.