CODEWITHSUNDEEP
jquerygoogle-mapsgoogle-maps-api-3
Mr.Happy
Mr.Happy

Reputation: 2647

Google Map is not appearing in page

I am new with Google Map API so please guide me. When I put this code in HTML map is not appearing in my page. I am not able to see anything.

How to fix this issue.

I have this javascript code:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(41.850033, -87.6500523);
        var mapOptions = {
            zoom: 7,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: chicago
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        directionsDisplay.setMap(map);
    }

    function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);       
</script>

My HTML + CSS Code:

<style type="text/css">
    #map-canvas {
        width: 80%;
        height: 80%;
        margin: 0px;
        padding: 0px
    }
    #panel {
        position: absolute;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
    }
</style>

<div id="panel"> <b>Start: </b>
    <input type="text" name="start" id="start" onchange="calcRoute();">
<b>End: </b>
    <input type="text" name="end" id="end" onchange="calcRoute();">
</div>
<div id="map-canvas"></div>

Upvotes: 2

Views: 127

Answers (2)

Anto Jurković
Anto Jurković

Reputation: 11258

You have to add styling also for complete page. Something like:

<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }

    #map-canvas {
    ...
</style>

Somehow it doesn't know where to put your map.

Upvotes: 1

Usman
Usman

Reputation: 3278

Following link would be helpful to you.

http://www.birdtheme.org/useful/v3tool.html

  • This has the good example about how to use v3 tool of Google Map

Upvotes: 0

Related Questions