Google maps api javascript crash Safari browser (v7.0 - Mac OSX 9) when loading the page.
It crash when open the page on mobile (I've tried on iPhone 5 - chrome).
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script>
var panel;
var view;
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(39, -96),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var panelDiv = document.getElementById('panel');
var data = new StoreDataSource;
view = new storeLocator.View(map, data, {
geolocation: true,
features: data.getFeatures()
});
panel = new storeLocator.Panel(panelDiv, {
view: view
});
google.maps.event.addListener(panel, 'stores_changed', setScrollbar);
});
</script>
On the code I'm loading store data (with statics location) and then insert on the map.
But even if I remove that part of the code, still crashing on Safari and mobile.
Here is the link of the page to test:
http://casamigostequila.com/pick-up-a-bottle/
Related
I'm using the WP Google map plugin for my site. When I use my finger to scroll down the mobile page on an iPhone, once I get to the map, the page scrolling is overridden and the map starts panning. The only way for me to scroll farther down the page is to put my finger above or below the map, assuming such space is available.
Is there a way to solution to this? Something along the lines of disabling the mobile scroll?
Link: http://zaaroinfotechsolutions.com/zaarodemo/longbeach/contact-us/
You should deactivate scroll when initiating the map:
var mapOptions = {
// ...
scrollwheel: false,
// ...
};
Then you can control whether to make the map draggable or not by getting the width of the layout like:
var drag = $(document).width() > 640 ? true : false;
var mapOptions = {
// ...
isDraggable: drag,
scrollwheel: false,
// ...
};
Furthermore, if you want to maintain map navigation functionality in mobile devices, you can do it by setting the panControl - bool, true or false - property in your mapOptions.
Edit: Passing the mapOptions on init
HTML
<div id="map-canvas"></div>
JS
<script>
var map;
function initialize() {
var mapOptions = {
// ... your existent init code
isDraggable: drag,
scrollwheel: false,
// ...
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I'm doing this to add Google Earth to Google Maps v3:
google.load("earth", "1");
// map options
var options = mapster.MAP_OPTIONS,
element = document.getElementById('map-canvas'),
// map
map = mapster.create(element, options);
var ge = new GoogleEarth(map);
The script on my html file looks like this:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://www.google.com/jsapi"></script>
<script src="googleearth.js"></script>
<script src="script.js"></script>
I keep getting Uncaught google.earth not loaded and not sure what I did wrong.
I'm using this reference: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/googleearth/docs/reference.html
Here's my full code in case it helps: http://plnkr.co/edit/NlPF3F259IIMgj2pfN09?p=preview
I really want to add Google Earth to Google Maps like the one in here: http://maps.google.com
Is it possible with v3?
Yes - it is possible to integrate the Earth Api with the Maps v3 API - here is a working example.
The problem with your code is the line var ge = new GoogleEarth(map); - you are making this call before the Earth api has finished loading via the asynchronous call to google.load("earth", "1");
This means that google.earth is null when you try and use it and so the Uncaught google.earth not loaded error is thrown.
To fix it you should only call new GoogleEarth(map) once the API has finished loading. The easiest way to do this is probably to use a callback.
For example - you could amend your script.js as follows.
(function(window, google, mapster) {
google.load("earth", "1");
// map options
var options = mapster.MAP_OPTIONS,
element = document.getElementById('map-canvas'),
map = mapster.create(element, options);
// callback method to fire once the api had loaded
google.maps.event.addDomListener(window, 'load', function() { new GoogleEarth(map) });
var marker2 = map.addMarker({
lat: 37.781350,
lng: -122.485883,
draggable: true,
events: [{
name: 'click',
callback: function(e, marker) {
console.log(e, marker);
}
}, {
name: 'dragend',
callback: function() {
alert('dragged');
}
}]
});
// no point calling this here as google.earth will be null
//var ge = new GoogleEarth(map);
}(window, google, window.Mapster));
Is it possible to show the default Google Maps icon and popup on a custom map?
The default one with the address, title directions nearby etc etc.
This is how i've currently got it set up and working fine apart from the marker..
var map;
jQuery(function($) {
function initialize() {
var styles = [
{
stylers: [
{ "saturation": -100 }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(55.6468, 37.581),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
google.maps.event.addDomListener(window, 'load', initialize);
});
Is it possible to show the default Google Maps icon and popup on a custom map?
The default marker is easy, see the documentation, but the answer for the Google Maps default infowindow is no, but you can create your own infowindow that looks similar and has similar functionality.
I copied following javascript code from google maps documentation, but it doesn't work, it only shows a white blank page, nothing loads.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<!--
Include the maps javascript with sensor=true because this code is using a
sensor (a GPS locator) to determine the user's location.
See: http://code.google.com/apis/maps/documentation/javascript/basics.html#SpecifyingSensor
-->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Since v3 require api key what's wrong with it? I checked in google chrome and firefox but no clue.
Looks like you are missing a closing html tag, unless that is a typo.
Add this </html> at the bottom of the page.
You need to provide a center location to create your map. In your initialize() function change the map options to include the location you want to start with:
var myCenter = new google.maps.LatLng(60.0,105.0);
var myOptions = {
zoom: 6,
center: myCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
When (or if) you get a location from the geolocation service the center will be changed by your code.
Old question, will answer anyhow in case anyone else lands here.
I ended up using a slightly different implementation to get this to work:
<script type="text/javascript">
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);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp'+
'&key={{API_KEY}}&sensor=false&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript();
</script>
The part that I had to add to get it to work from other (nearly identical) versions of this, was the () at the end of loadScript(). The implicit function call simply was not happening.
You will need to replace {{API_KEY}} with your own. I am not sure if this is required, but it was part of what led me to a working implementation.
If you do not have one, follow the steps listed here
Basically I have a KML file that has a TON of polygons to be mapped out. I need those polygons to be clickable in which I'd perform an ajax response.
I'm pretty lost, though. Can someone point me in the right direction? :)
Check out the polygon-array example that the Google Maps documentation refers to. It shows how to draw polygons, and how to respond to clicks on such polygons.
To view the example:
http://code.google.com/apis/maps/documentation/javascript/examples/polygon-arrays.html
To view the source-code behind it:
view-source:http://code.google.com/apis/maps/documentation/javascript/examples/polygon-arrays.html
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(41.376259, 25.055542),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var Place = new google.maps.KmlLayer({
url: 'path-to-kml.kml'
});
Place.setMap(map);
google.maps.event.addListener(Place, 'click', function (event) {
window.location.href = 'http://example.com'
});
}
google.maps.event.addDomListener(window, 'load', initialize);