Search code examples
apigoogle-mapsgoogle-maps-api-3google-goggles

How to add Google Maps Api in a project?

I am creating a E-commerce website and i want to add Google Maps API in it?

I know it is a very simple thing but i am having a minor problem in it, so can anyone help me in how to add Google Maps API?

Solution

  • if you want to add a map without iframe, check out this jsfiddle

    http://jsfiddle.net/cQTdc/

    <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)"