How to add Google Maps Api in a project?

252 Views Asked by Rajab Saleem At 13 April 2025 at 02:39

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?

Original Q&A

There are 1 best solutions below

Glynne Turner On 11 April 2014 at 12:22 BEST ANSWER

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

How to add Google Maps Api in a project?

There are 1 best solutions below

Related Questions in API

Related Questions in GOOGLE-MAPS

Related Questions in GOOGLE-MAPS-API-3

Related Questions in GOOGLE-GOGGLES

Trending Questions

Popular # Hahtags

Popular Questions