CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
PHP User
PHP User

Reputation: 2422

google maps api does not load the map

I'm using this code to generate a google map using google maps api. This is the working example jsfiddle

js code

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

function initialize() {
    var myloc = new google.maps.LatLng(35.433820, -97.135620);
    var mapOptions = {
        zoom: 17,
        topCenter: myloc,
        scrollwheel: false
    };
    var map = new google.maps.Map(document.getElementById('map'),mapOptions);
    var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        animation: google.maps.Animation.BOUNCE
    });
    var contentString = '<div id="content" style="dir:rtl; text-align:right;">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading"><h1>title here</h1>'+
            '<div id="bodyContent">'+
            '<p>description here</p>'+
            '</div>'+
            '</div>';
    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 250
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

html code

<div id="map"></div>

The map iframe is there but the map is empty no mark no roads just the iframe

Upvotes: 0

Views: 2382

Answers (2)

Bardo
Bardo

Reputation: 2523

If you change your topCenter parameter for center parameter it works

Upvotes: 2

Dr.Molle
Dr.Molle

Reputation: 117314

A map requires the center-option(you've set a topCenter-option). Furthermore you should load the release-version of the API, the current experimental version is very buggy.

https://jsfiddle.net/doktormolle/h9q2ncnx/2/

Upvotes: 3

Related Questions