Menu
As part of a much bigger project, we're trying to get a Map on a site using Google's Map API v3. I have followed the simplest steps that Google has laid out, I've tried copying code outright from other working maps. But no matter what I do, all we get is a gray box and no map.
Using Firebug, I can see the information trying to populate the map, but it is simply not displaying. I've tried jquery, jquery libraries specifically made for google maps, nothing is working. I have been up and down the internet and all through google's api help files. Plus, the problem is not local as I've uploaded the file to multiple servers and tested it on multiple browsers and computers. Nothing is working.
At this point it's got to be something stupid that I'm overlooking. Here's my code.
<!DOCTYPE html> <html> <head> <title></title> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true"> </script> <script type="text/javascript"> function load() { var mapDiv = document.getElementById("map"); var latlng = new google.maps.LatLng(-34.397, 150.644); var mapOptions = { //zoom: 8, center:latlng, //backgroundColor: '#ff0000', mapTypeId: google.maps.MapTypeId.ROADMAP, imageDefaultUI: true }; var map = new google.maps.Map(mapDiv, mapOptions); function createMarker(point, text, title) { var marker = new GMarker(point,{title:title}); return marker; } } </script> </head> <body onload="load()"> <div id="map" style="width: 800px; height: 400px;"></div> </div> </body> </html> 
732
Buildings. Solid Gray: This color represents non-commercial areas (primarily residential). They are two types of gray: dark and light gray. Regular residential areas are depicted as light gray, but if you zoom in, there will be a distinction between buildings.
You won't be charged until your usage exceeds $200 in a month. Note that the Maps Embed API, Maps SDK for Android, and Maps SDK for iOS currently have no usage limits and are at no charge (usage of the API or SDKs is not applied against your $200 monthly credit).
You have to pay for every single view of your map. To fix this you have to create an account in the Google Console, enter your credit card information, select the appropriate API and get the Google Maps code for you website.
This works for me. You simply have to set zoom parameter:
UPDATE (by @user2652379): You need to set BOTH zoom and center options. Just zoom does not work.
<!DOCTYPE html> <html> <head> <title></title> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </script> <script type="text/javascript"> function load() { var mapDiv = document.getElementById("map"); var latlng = new google.maps.LatLng(-34.397, 150.644); var mapOptions = { zoom: 8, center:latlng, //backgroundColor: '#ff0000', mapTypeId: google.maps.MapTypeId.ROADMAP, //imageDefaultUI: true }; var map = new google.maps.Map(mapDiv, mapOptions); // map.addControl(new GSmallMapControl()); // map.addControl(new GMapTypeControl()); // map.addMapType(ROADMAP); // map.setCenter( // new GLatLng(37.4419, -122.1419), 13); } </script> </head> <body onload="load()"> <div id="map" style="width: 800px; height: 400px;"> </div> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
