javascript - Google Map Centers at top left corner - Stack Overflow

admin管理员组

文章数量:1289541

I've been looking at many different examples, problems, and other things regarding this and I can't seem to find anything, so i'll finally ask a question.

The map I have does not center the marker and doesn't even display it. The point it the very top left corner. See here: .png

I have a tab system for contact information. When someone clicks a tab, the map and info slides down and shows up the proper marker (4 separate maps), however I can't get the first one to work so I can't copy/paste it.

Here is my code:

Script:

var latlng = new google.maps.LatLng(42.3535727, -83.0591444);
var options = {  
      zoom: 14,  
      center: latlng,  
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
var map = new google.maps.Map(document.getElementById('detroit_map'), options);
marker1 = new google.maps.Marker({  
            position: new google.maps.LatLng(42.3535727, -83.0591444),
            map: map
          }); 
map.setCenter(latlng);

Html:

<div id="detroit_map" style="width:270px;height:170px;"></div>

P.S, I get no errors in chrome developer tools.

It's hopefully something really simple that I overlooked.

Thanks

Found the answer for future viewers:

Turns out, my tabs causing the display between block, and none were making my map load weird. I made an initialize function for each, and called setTimout('functionName', 1000); to call the maps to load.

I changed my map code a little bit, but everything can we found on w3schools under their tutorial.

I've been looking at many different examples, problems, and other things regarding this and I can't seem to find anything, so i'll finally ask a question.

The map I have does not center the marker and doesn't even display it. The point it the very top left corner. See here: https://i.sstatic/YK1g0.png

I have a tab system for contact information. When someone clicks a tab, the map and info slides down and shows up the proper marker (4 separate maps), however I can't get the first one to work so I can't copy/paste it.

Here is my code:

Script:

var latlng = new google.maps.LatLng(42.3535727, -83.0591444);
var options = {  
      zoom: 14,  
      center: latlng,  
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
var map = new google.maps.Map(document.getElementById('detroit_map'), options);
marker1 = new google.maps.Marker({  
            position: new google.maps.LatLng(42.3535727, -83.0591444),
            map: map
          }); 
map.setCenter(latlng);

Html:

<div id="detroit_map" style="width:270px;height:170px;"></div>

P.S, I get no errors in chrome developer tools.

It's hopefully something really simple that I overlooked.

Thanks

Found the answer for future viewers:

Turns out, my tabs causing the display between block, and none were making my map load weird. I made an initialize function for each, and called setTimout('functionName', 1000); to call the maps to load.

I changed my map code a little bit, but everything can we found on w3schools under their tutorial.

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Dec 26, 2012 at 21:20 Devyn asked Dec 26, 2012 at 18:42 DevynDevyn 21911 gold badge22 silver badges1515 bronze badges 2

• 1 Your script above has an error; remove the trailing ma after ROADMAP to fix – Mark Commented Apr 26, 2013 at 1:05
• Thank you for adding your own answer, it helped me solve a similar problem. Calling the map init function, after changing display to "block", was the solution for me. – Ricardo Nunes Commented Sep 15, 2014 at 11:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Initialize the map after the tab is clicked. This also works for the iframe google map, when used inside a tab.

Tell your map to resize..

google.maps.event.trigger(map, 'resize');

map is the map instance that is returned by

map = new google.maps.Map(document.getElementById("map_canvas"), {
     mapTypeId: google.maps.MapTypeId.ROADMAP
});

本文标签： javascriptGoogle Map Centers at top left cornerStack Overflow