if you want to add a map without iframe, check out this jsfiddle
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(51.372658, 1.354386),
zoom:16,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map_canvas {
width: 500px;
height:400px;
border:1px solid #888888;
margin-bottom:20px;
box-shadow: 2px 2px 2px #888888;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
</body>
you will need to change here for the longitude and latitude for your location. You can get this from google maps. the part to change is “new google.maps.LatLng(51.372658, 1.354386)”
solved How to add Google Maps Api in a project? [closed]