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