I currently have 3 separate google maps being loaded on my web page using the javascript api and they take a good few seconds to load in which this renders the page inactive until they have finished.
Does anyone have any recommendations on what I can do to change this? It is very slow at the moment and I don't know how to get around this.
Thanks!
function googlemap() {
// map pin
var companyImage = new google.maps.MarkerImage('http://urlgoeshere.co.uk/images/home/map_pin.png',
new google.maps.Size(100,60),
new google.maps.Point(0,0),
new google.maps.Point(21,65)
);
// map pin shadow
var companyShadow = new google.maps.MarkerImage('http://urlgoeshere.co.uk/images/home/map_shadow.png',
new google.maps.Size(120,60),
new google.maps.Point(0,0),
new google.maps.Point(23,23)
);
// map one
var onePos = new google.maps.LatLng(44.374411, -1.088402);
var oneSettings = {
zoom: 15,
center: onePos,
scrollwheel: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: false,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var oneMap = new google.maps.Map(document.getElementById("one_map"), oneSettings);
var oneMarker = new google.maps.Marker({
position: onePos,
map: oneMap,
icon: companyImage,
shadow: companyShadow,
zIndex: 3
});
google.maps.event.addListener(oneMarker, 'click', function() {
infowindow.open(map,oneMap);
});
// two
var twoPos = new google.maps.LatLng(42.349055,4.110803);
var twoSettings = {
zoom: 15,
center: twoPos,
scrollwheel: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: false,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var twoMap = new google.maps.Map(document.getElementById("two_map"), twoSettings);
var twoMarker = new google.maps.Marker({
position: twoPos,
map: twoMap,
icon: companyImage,
shadow: companyShadow,
zIndex: 3
});
google.maps.event.addListener(twoMarker, 'click', function() {
infowindow.open(map,twoMap);
});
// three
var threePos = new google.maps.LatLng(32.377624,-0.523466);
var threeSettings = {
zoom: 15,
center: threePos,
scrollwheel: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: false,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var threeMap = new google.maps.Map(document.getElementById("three_map"), threeSettings);
var threeMarker = new google.maps.Marker({
position: threePos,
map: threeMap,
icon: companyImage,
shadow: companyShadow,
zIndex: 3
});
google.maps.event.addListener(threeMarker, 'click', function() {
infowindow.open(map,threeMap);
});
and my html
<div id="one_map"></div>
<div id="two_map"></div>
<div id="three_map"></div>
I'd recommend breaking up your function in to one function for each map you're creating (or one dynamic one that can do the work based on parameters), then at the end of each one, execute the next using a setTimeout call with either a delay of 0, or just a small delay. When you then drop out of the function you give the UI time to update without waiting for the whole task to be completed. While not actually making your page faster, it makes it feel faster and more responsive. There may be other improvements as well, but this simple change can often make a huge difference.
Perhaps it has to do with your OS or bandwidth.
Have a look at these:
9 maps: http://maps.forum.nu/gm_maps_in_sync.html
and
16 maps: http://maps.forum.nu/gm_maps_in_sync2.html
They are API V2, and pretty much useless, but they are created in a loop and they load fast.
Note that getElementById() can be costly depending on the complexity of your DOM. The examples I posted use createElement() and appendChild() instead.
Related
I have implemented google map and put default view as Satellite. But when page is loading background is showing blue before showing map. Its working fine when put map view default. I have checked with backgroundColor: 'none' in map option. But its not working.
I am using code like:
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(center_lat,center_long),
zoom: 18,
mapTypeControl: true,
mapTypeControlOptions:
{
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID],
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeId: google.maps.MapTypeId.HYBRID,
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
},
backgroundColor: 'none'
});
Can someone help me?
I was defining map variable before getting location details. I found a solution for this issue. define map variable after calling url for get location details. For example:
$.getJSON('googlescript.php', function(items)
{
var center_lat = '30.704649';
var center_long = '76.717873';
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(center_lat,center_long),
zoom: 18,
mapTypeControl: true,
mapTypeControlOptions:
{
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID],
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeId: google.maps.MapTypeId.HYBRID,
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
},
backgroundColor: 'gray'
});
var routePoints = [];
for (var i = 0; i < items.length; i++) {
(function(item) {
addMarker(item.lat,item.long);
})(items[i]);
routePoints.push(new google.maps.LatLng(items[i].lat,items[i].long));
var route= new google.maps.Polyline({
path: routePoints,
strokeColor: "#FF0000",
strokeOpacity: .9,
strokeWeight: 3,
geodesic: true,
icons: [{
icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
offset: '0',
repeat: '100px'
}
]
});
map.setCenter(new google.maps.LatLng(center_lat,center_long));
map.setZoom(18);
route.setMap(map);
map.setTilt(0);
}
});
center = bounds.getCenter();
map.fitBounds(bounds);
I would like to position my satellite button to the center of the map but however is not working. Would appreciate if anyone can assist here. thanks.
function initialize() {
$(q).addClass('fmp_responsive_map');
startMap(true);
var mapProp = {
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapProp);
$('input[type="submit"], button[type="submit"]', $(y.searchForm))
.on('click', function(a) {
a.preventDefault();
var b = $(y.searchForm).attr("action");
searchData(b)
})
}
Tried the working sample found here, and made changes to the following code.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: -28.643387, lng: 153.612224},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.CENTER
},
...
That's it. Try using CENTER.
So my Google Maps API WAS working and now it's not. Looking through the documentation on Google's Maps API I don't see that anything has changed. We're using the maps embedded in a Wordpress PHP Template and everything I've checked seems to be right. Has something changed?
Here's the initial code:
<section id="main">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqnue6HpFD-HQvnk_cOKTQmqAzE6Xb9NQ"></script>
<script type="text/javascript" src="http://www.americanraceronline.com/wp-content/uploads/dev/markerwithlabel.js"></script>
<script type="application/javascript" >
var map;
var infoWindow;
function initialize() {
var myLatLng = new google.maps.LatLng(40.6,-95.665);
var myOptions = {
center: myLatLng,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: true,
draggable: true,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.Whitewater,
styles:[/lots of styles here/]};
var poly;
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker1 = new MarkerWithLabel({
position: new google.maps.LatLng(40.27488643704891, -110.740234375),
draggable: false,
raiseOnDrag: false,
map: map,
labelContent: "WEST",
labelAnchor: new google.maps.Point(22, 2),
labelClass: "mylabels", // the CSS class for the label
labelStyle: {opacity: 1.0},
icon: {}
});
The link to the page is: http://www.americanraceronline.com/distributors/
What am I missing?
In your browser console:
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.main.js:60 yl
This does not need much explanation: you must be including the Google API repeated, check your includes to contain API reference only once.
Maybe file main.js, line:60 ??
For Google Maps mapOptions, zoom is required (see reference), e.g.
var myOptions = {
center: myLatLng,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: true,
draggable: true,
disableDefaultUI: true,
zoom: 9,
styles:[/lots of styles here/]
};
For example, I created a simple Fiddle of your code that did not work until zoom was provided.
I use Dell Venue 7 tablet. The app is written on phonegap. After 18x zoom this app stops respond on any requests.
var map = new google.maps.Map(map_canvas[0], {
zoom: 2,
center: new google.maps.LatLng(40, -79),
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_RIGHT
},
scaleControl: true,
streetViewControl: false,
preserveViewport: true
});
and that i do map.setZoom(18) and the app stops working.
I am struggling with the marker on a custom map. The map centers on the right place, but the marker doesn't show up on that place. Someone has the same problem already solved?
Thank you a lot for your help!
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
scrollwheel: false,
zoom: 16,
center: new google.maps.LatLng(51.840164,4.33244),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
}
}
var map = new google.maps.Map(map_canvas, map_options)
}
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: 'locationpointer.png',
map: map_canvas
});
}
var features = [
{
position: new google.maps.LatLng(51.840164,4.33244),
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
google.maps.event.addDomListener(window, 'load', initialize);
You need to call your addMarker function in the initialize function so the markers are added after the map is initialized, not before. You have 2 options for initializing the map property of the marker either 1. make it global or 2. pass it in to the addMarker function (as below). Also note that map_canvas is a HTML DOM element, not a google.maps.Map, the name of that variable is "map".
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
scrollwheel: false,
zoom: 16,
center: new google.maps.LatLng(51.840164,4.33244),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
}
}
var map = new google.maps.Map(map_canvas, map_options)
var features = [
{
position: new google.maps.LatLng(51.840164,4.33244),
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature, map);
}
}
function addMarker(feature, map) {
var marker = new google.maps.Marker({
position: feature.position,
icon: 'locationpointer.png',
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You are missing to add the marker to the map.
Either use marker.setMap(map) or pass it via marker properties as you try to do.
But in your code the map and map_canvas variables are not in the global scope, this means your addMarker function cannot add it and map: map_canvas is null
var marker = new google.maps.Marker({
position: feature.position,
icon: 'locationpointer.png',
**map: map_canvas**
});
You would have to slightly change your code to pass the map into the addMarker function.