-1

I want to show location in Google map using JavaScript, but when I zoom out, it shows multiple maps! Also, the map is not fixed in the browser window.

How can I fixate it to the window and force it to show just one map?

     <!DOCTYPE html>
      <html>
      <head>
          <title>My Location:</title>
          <meta charset='utf-8'>
            <meta name='viewport' content='width=device-width, initial-scale=1.0'>
            <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&amp;language=en'></script>
            <script type='text/javascript'>

                var map;

                function loadMap(lat,lng) {
                    var myOptions = {
                        zoom: 16,
                        center: new google.maps.LatLng(lat,lng),
                        mapTypeId: google.maps.MapTypeId.ROAD ,
                        //scrollwheel: false,
                        //disableDoubleClickZoom: true,
                        minZoom: 1
                    };
                    map = new google.maps.Map(document.getElementById('my_location'), myOptions);
                    map.streetViewControl=true;
                    //window.onresize = google.maps.event.trigger(map, 'resize');

                }
                window.addEventListener('resize', function(){
                        google.maps.event.trigger(map,'resize');
                    });
            </script>
        </head>
        <body onload='loadMap(46.518465, 6.5,45,7)'>
                <div class='fd'>
                    <div class='cd'>
                        <div id='my_location' class='shadow' style='width:600px;height:260px;'></div>   
                    </div>
                </div>
        </body>
    </html>

Edit :

I have uploaded my page screen shot here : one : is when my page is loaded. two : is when I zoom out and resize the window. three : is when I move map to scroll it.

as you see, in two I have three map ! and in three map didn't fix to its div!

Edit2: I upload my code!

user90
  • 73
  • 3
  • 13

2 Answers2

0

Your question is not really clear. Could you please provide further explanation of the issue?

Resizing the map on div change

From API reference:

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .

All you have to do is trigger this event when your window resizes e.g. window.onresize

Adding listener

window.addEventListener('resize', function(){
   google.maps.event.trigger(map,'resize');
});

Displaying the map div
Put this in the <head> of your document.

<style type="text/css">
 html { height: 100% }
 body { height: 100%; margin: 0; padding: 0 }
 #my_location{ height: 100% }
</style>
  • I want to make map window like [link](https://www.google.com/maps/) which has ability to zoom in/out and scrollwheel zooming on the map! – user90 Aug 04 '14 at 15:40
  • Those options are enabled by default in the library. As I've stated in the answer, your question is not clear and needs broader explanation. –  Aug 04 '14 at 15:45
  • I don't have enough Reputation to show the picture! – user90 Aug 04 '14 at 15:57
  • You can save it online and post link; else description will have to suffice. –  Aug 04 '14 at 16:00
  • I want to scroll the map by mouse, but the problem is when I reach the top or button of the map it show background of the div which map is located on it ! (as shown in picture: three) – user90 Aug 05 '14 at 08:15
  • You have to reset the map size so it matches the divs size, as I've stated in my answer above. –  Aug 05 '14 at 09:34
  • I do it, but noting happen : `window.onresize = google.maps.event.trigger(map, 'resize');` – user90 Aug 05 '14 at 09:54
  • My answer is edited; if it does not work please post your entire code. –  Aug 05 '14 at 10:21
  • You also have to specify the html and body height :) –  Aug 05 '14 at 13:03
  • Your code runs fine on JSBin. I have no idea what does not work. –  Aug 05 '14 at 18:53
0

From what I can tell, you are concerned that at the highest zoom levels three copies of the map are shown? This is standard to Google Maps and basically all webmaps. If you don't want that, you could investigate making a custom map with Kartograph.

If you are trying to stop zooming, change to the following code:

var myOptions = {
    zoom: 16,
    center: new google.maps.LatLng(lat,lng),
    mapTypeId: google.maps.MapTypeId.ROAD ,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    minZoom: 1
};

Other than that, I'm not sure what you are asking.

Josh
  • 3,385
  • 5
  • 23
  • 45
  • yes, It is standard to Google Maps, I didn't know it before! but I have problem with the map that it is not fix to its div! – user90 Aug 05 '14 at 21:52
  • What do you mean it isn't fixed to it's div? What is moving? – Josh Aug 05 '14 at 21:54
  • when I scroll the map and move it, when the map finishes it show the div background (as shown in picture three). I want that my map fix to the div like [here](https://www.google.com/maps/@36.2649049,-83.020818,2z) – user90 Aug 05 '14 at 22:08
  • I think I understand. See [How do I limit panning in Google Maps API v3](http://stackoverflow.com/questions/3125065/how-do-i-limit-panning-in-google-maps-api-v3). – Josh Aug 05 '14 at 22:35
  • I think it will work for me, but how can I fix it to all of map – user90 Aug 06 '14 at 07:53
  • The solution in [How do I limit panning in Google Maps API v3](http://stackoverflow.com/questions/3125065/how-do-i-limit-panning-in-google-maps-api-v3), disable panning, but I want that the user be able panning in map! – user90 Aug 06 '14 at 11:57