I have a fairly straightforward Google Maps implementation running well in Chrome on a Mac. Yet - I am not working on the mobile implementation as well as cross-browser fixes, and have discovered that the map itself is not properly displaying / functioning, let alone the markers and infowindows that should be showing up. The native zoom tool never displays and I can't click anywhere on the map or drag it.
I've been googling and googling but not turning much up. Any hints or help would be much appreciated (while realizing this is not specifically a code question - yet).
I discovered the prob on my own app, but tested using Google's 'hello world' for the maps API, and it's exactly the same issue:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDSh0tsHL1DQBwI0-xfuQkUezonGxlt39k&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Your map doesn't have a completely defined size. You need to specify both the height and width, either as percent up to a parent element that has a size or specifically define the size of the div. If the size isn't defined it is zero.
Related
Since the latest release (on Tuesday) of the Google Maps API, every time I drag the little man onto a road and drop it, I get a script error (http://maps.googleapis.com/maps-api-v3/api/js/22/7/intl/en_gb/util.js). The Street View then displays fine - but there is no Address Control and therefore no way to exit from Street View!
A similar script error also happens when specifying v3.23 (the error is http://maps.googleapis.com/maps-api-v3/api/js/23/7/intl/en_gb/util.js instead)!
However, if I set the controlStyle to 'azteca' everything works fine. As this setting will be removed in August, I'm keen to start using the latest version as soon as possible.
Can anyone help?
Here's some code:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map_canvas { height: 100%; }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&v=3.23"> </script>
<script type="text/javascript">
var map;
function Initialize() {
try{
//google.maps.controlStyle = 'azteca';
map = new google.maps.Map(document.getElementById("map_canvas"), { zoom: 13, center: new google.maps.LatLng(51.41347, -0.83518), mapTypeId: google.maps.MapTypeId.ROADMAP });
return "";
} catch (err) {
return err.message;
}
}
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
If you uncomment the commented line all works fine (but with the old controls).
John
I'm pleased to say that I am now able to answer my own question!
This may be of use to the other poster (Mac21 was it) who was also having this same issue.
The vb.net WebBrowser control is the problem!
In the latest Frozen Release of the Google Maps API, they have stopped supporting IE8 (which is understandable!). The WebBrowser control, by default, uses IE7 for its rendering.
Fortunately, there is a way to over-ride this behaviour by adding a value into a key in the registry. Once this value is in place, the Google Maps API works a treat!
I can't claim any credit for the actual solution as I found it here https://weblog.west-wind.com/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version - so thanks to Rick Strahl!
Enjoy!
John
I'm using Google Maps API v3, and the map language is set according to user's browser locale.
Is there a way to change this setting and force map to load in US English?
There is this, but it changes the region language, i.e. street names etc., I also want to control the map buttons and the interface language.
Try This:
<!DOCTYPE html>
<html>
<head>
<title>Localizing the Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
And you can load map in any specific language by passing the value of language code parameter with in this
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
Some example language codes are given here:
pass en for load map into english similarly ja for Japanese and
fr for French
I hope this is what you are asking for.
for more info click here
Happy coding!!
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=true&language=sa"></script>
i am using languague of saudi arabia
I am pretty new to this whole WebWorks stuff (Just started playing around with it today, getting ready for a local blackberry hackathon) and i decided to learn it by action with the google maps api to generate content for me to play with, as well as considering a WebWorks port of a maps app i'm working on for Android.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta id="viewport" name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"" />
<link href='style.css' rel='stylesheet' type='text/css'>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=SNIP&sensor=true&language=es®ion=CO">
</script>
<script type="text/javascript" src="javascript.js">
</script>
</head>
<body onload="initializeMap()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
The CSS:
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%
}
And the JS:
function initializeMap() {
var mapOptions = {
center: new google.maps.LatLng(6.199383, -75.578980),
zoom: 17,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
Now my question is: Why doesn't clicking or dragging the map on the Ripple emulator work? [WebWorks BB10] It works wonders on chrome, i can pan, zoom and the markers get placed when i click them.
Thanks.
Edit
The map renders fine on Ripple, but the map itself won't work, nothing happens if i click or drag around with the mouse. The Satellite, Map and zoom buttons do work though
Clicking or dragging the map on the Ripple emulator may not work for a couple of reasons:
There is a runtime error happening and something within the Google
Maps is failing. Try opening Web Inspector (right click on map in
Ripple and select "Inspect Element") to see if there are any run
time errors. It may explain why certain behavior is not working as
expected.
Touch events may not be handled correctly. Try opening Web Inspector (right click on map in Ripple and select "Inspect Element"). Then open the settings (gear in bottom right corner) and select the "Overrides" tab. Make sure that the "Emulate touch events" checkbox is enabled.
Hope that helps.
I want to get a map (I only need a picture) that has the road network
but without labels (text on the map). I tried to get such a map from Google API and thought "element:geometry"
works.
But, for example, this link is still full of texts.
How can I obtain a road network map (static picture is ok) without text labels?
Any provider is ok, e.g. Google, Yahoo, Mapquest...
Use this style:
style=feature:all|element:labels|visibility:off
it will hide all labels for all features.
http://maps.google.com/maps/api/staticmap?sensor=false&size=512x512¢er=Brooklyn&zoom=12&style=feature:all|element:labels|visibility:off
I got a better solution:
Create a html file and insert the code below.
<!DOCTYPE html>
<html>
<head>
<title>Mapa GMR Norte</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var customMapType = new google.maps.StyledMapType([
{
elementType: 'labels',
stylers: [{visibility: 'off'}]
}
], {
name: 'Custom Style'
});
var customMapTypeId = 'custom_style';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 41.4416459, lng: -8.2911885}, // Brooklyn.
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
}
});
map.mapTypes.set(customMapTypeId, customMapType);
map.setMapTypeId(customMapTypeId);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
Hope it helps! :)
The Google Maps Styled Map Wizard (link below) will allow you to remove labels (and also make tons of other customizations).
https://mapstyle.withgoogle.com/
This is the documentation on map styling for the JavaScript API. There's also a Styled Map Wizard that lets you play with the styles to get exactly what you want.
by "I only need a picture" I take it you don't need to access to API, Google Inc devs still didn't a chance to apply all the features from the old maps to the new design.
However you can still access it by going to https://maps.google.com/?output=classic
and you can go to settings and customise "tick labels off" and so forth...
As of...today, it seems, Google Maps no longer has embed code!
Can someone point me in the right direction, or maybe offer up some old embed code I could try to embed into something useful?
Here is the article explaining how to embed a Google Map:
http://maps.google.com/help/maps/getmaps/quick.html
I think this has to do with the Google+ Social Network "thing" that appeared in the last few days.
Also, I have tried the instructions in the link above both logged into a Google Apps account and not logged in to any Google account.
I just tried the embed code and it seems to be working correctly for me. Did you change anything on your page recently? Here is what I tried.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&
amp;q=Birmingham,+MI&aq=1&sll=37.0625,-95.677068&sspn=64.880423,107.138672&
amp;ie=UTF8&hq=&hnear=Birmingham,+Oakland,+Michigan&t=h&z=12&
amp;ll=42.546701,-83.211319&output=embed"></iframe><br /><small><a
href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&
amp;q=Birmingham,+MI&aq=1&sll=37.0625,-95.677068&sspn=64.880423,107.138672&
amp;ie=UTF8&hq=&hnear=Birmingham,+Oakland,+Michigan&t=h&z=12&
amp;ll=42.546701,-83.211319" style="color:#0000FF;text-align:left">View Larger Map</a></small>
Try disabling your Maps Labs in order to use map embedding. - reference
http://maps.google.com - the embed box is now back.
I guess it was a temporary glitch. I am pretty sure it was not on my side, I tried a few different machines and browsers.
Google maps has shifted settings link from bottom right to top left, left side of search bar
Here is the code to add Google Maps to your webpage. No API key needed.
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(54.584063, -5.928343),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>BLAAAAAAAAAAAAAAAAAAA</title>
<link rel="stylesheet" href="style.css">
<body>
<div id = "map-canvas"/>
</body>