Responsive Google Map (Javascript & Google API V3)

This tutorial uses HTML5 and JavaScript to implement a responsive Google Maps map, no iframes or css code needed.

The main idea of this tutorial is to make the pointer on the map responsive / keep the pointer fixed on the chosen location on the map as we change the size of the window/map layout

Implementation guide

  • Get a Key/Authentication – Google Maps JavaScript API here
  • Edit the header line https://maps.googleapis.com/maps/api/js?key=[KEY]&callback=initMap and replace [KEY] with your unique Google Maps Key
  • Use Google Maps or other aplication to find the GPS coordinates of the location/pointer on the map and paste them on line 22 and 32 here like this: new google.maps.LatLng(51.506767, -0.1244953)

 

See a live DEMO or Download the code.

 

// simplecodetips.com tutorial
<script type="text/javascript">
      function initialize() {
        var mapOptions = {
                zoom: 17,
                center: new google.maps.LatLng(51.506767, -0.1244953),   
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };

        var map = new google.maps.Map(document.getElementById("map-location"),
                                        mapOptions);
                                  
        var marker = new google.maps.Marker({
                        map: map, 
                        draggable: false, 
                        position: new google.maps.LatLng(51.506767, -0.1244953)
            });
     }
                            
     google.maps.event.addDomListener(window, 'resize', initialize);
     google.maps.event.addDomListener(window, 'load', initialize);
                         
  </script>
// ::: eof