-1

I'm trying to center the map around the marker, right now you can barely see the marker in the left corner.

My code is:

 <script>
  function initialize() {
    var myLatlng = new google.maps.LatLng(<?php echo $hotelInformation['latitude']?>, <?php echo $hotelInformation['longitude']?>);
    var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
        center: myLatlng,          
        zoom: 12,
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"<?php echo $hotelInformation['name']?>"
      });
    var latLng = marker.getPosition(); 
    map.setCenter(latLng);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Have tried in multiple ways to get it to center but it doesen't work out How do I center the map so the marker is in the middle?

Troels Johannesen
  • 725
  • 2
  • 7
  • 30
  • did you google first, this is a duplicate of so many http://stackoverflow.com/questions/6150409/google-map-v3-set-center-to-specific-marker ... = map.setCenter(); – Angry 84 Mar 01 '15 at 08:48
  • @Mayhem, I have tried from your suggested link and tried google it , going through the google map api. But still I can't seem to get it to work. I have updated my code in the top - can you spot what I'm doing wrong ? – Troels Johannesen Mar 01 '15 at 10:10
  • Your code looks to be correct, check your browser console for any errors.. – Angry 84 Mar 01 '15 at 10:54
  • There is [nothing wrong with the posted code](http://jsfiddle.net/abrvj4zs/) (except that it doesn't provide a real latitude or longitude). What does your HTML/CSS look like? Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue. – geocodezip Mar 01 '15 at 15:42

1 Answers1

0

Try using the following code on this page: http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_first

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js"></script>

<script>


window.initialize = function() {
    var myLatlng = new google.maps.LatLng(-28.0000,138.0000);
    var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
        center: myLatlng,          
        zoom: 12,
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"123"
      });
    var latLng = marker.getPosition(); 
    map.setCenter(latLng);
  }
  google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>

<body>
<div id="map-canvas" style="width:500px;height:380px;"></div>

</body>
</html>

The reason why i suggest w3school, well jsfiddle was being a pain in the .... to get gmaps working.

Angry 84
  • 2,935
  • 1
  • 25
  • 24