I am using the MapBox JavaScript API and trying to display some maps on a tab widget. Everything is working fine, except for the fact that when the page first loads, the maps do not load. As soon as I interact with the map in some way like zoom in/out or drag, this causes all of the map tiles to load.
<div class="g12" id="mapbox" style="display:none">
<div class="widget" id="widget_tabs" style="min-height:400px;">
<h3 class="handle">http://www.mapbox.com/mapbox.js/example/v1.0.0/</h3>
<div class="tab">
<ul>
<li>MapBox 1</li>
<li>MapBox 2</li>
<li>MapBox 3</li>
</ul>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<style>
#map1 #map2 #map3 { position:absolute; }
#content {position: relative;}
</style>
<script>
$(document).ready(function() {
mapbox.auto('map1', 'examples.map-zr0njcqy');
mapbox.auto('map2', 'examples.map-zr0njcqy');
mapbox.auto('map3', 'examples.map-zr0njcqy');
$('#content').css({ height: 700});
var x = $('#mapbox'); /* cache the selector */
$('#map1,#map2,#map3').css({ width: x.width() * .98 });
$('#map1,#map2,#map3').css({ height: x.height() * .75});
});
</script>
<div id="map-1">
<div id='map1'></div>
</div>
<div id="map-2">
<div id='map2'></div>
</div>
<div id="map-3">
<div id='map3'></div>
</div>
</div> <!--end of class=tab-->
</div> <!--end of widget_tabs-->
How can I modify this code so that the it forces the maps to load correctly after the page loads? Thanks.
OpenLayers and MapBox OpenLayers.org is an open source JavaScript web mapping library distinguished from other alternatives, like Leaflet or Google Maps APIs, because of its huge set of components.
I spent the weekend creating sample apps by integrating OpenLayers with API's such as MapBox, WebGL etc... After all was said and done, I was extremely impressed with OpenLayers - and I plan to make use of OpenLayers in an upcoming POC/Project.
Here is a link to my test harness. From there you can also download the code for all of the examples, too.and finally...AN ANSWER TO YOUR QUESTION :) Defining an initialization JavaScript function: In my code below, I have defined a JavaScript function called initMap and invoke it by the browser to initialize the map after the page has finished loading.
<script>
function initMap() {
}
</script>
//Modify the body opening tag and add an onload event attribute to it:
<body onload="initMap();"> </body>
// Start - the actual code. See the test harness for working example
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
function initMap(){
var map = new OpenLayers.Map("map");
var earth = new OpenLayers.Layer.XYZ(
"Natural Earth",
["http://a.tiles.mapbox.com/v3/
mapbox.natural-earth-hypso-bathy/${z}/${x}/${y}.png",
"http://b.tiles.mapbox.com/v3/
mapbox.natural-earth-hypso-bathy/${z}/${x}/${y}.png",
"http://c.tiles.mapbox.com/v3/
mapbox.natural-earth-hypso-bathy/${z}/${x}/${y}.png",
"http://d.tiles.mapbox.com/v3/
mapbox.natural-earth-hypso-bathy/${z}/${x}/${y}.png"
],
{
attribution: "Tiles © <a href='http://mapbox.com/'>MapBox</a>",
sphericalMercator: true,
wrapDateLine: true,
numZoomLevels: 19
}
);
map.addLayer(earth);
map.setCenter(new OpenLayers.LonLat(105, 35).transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")), 4);
}
Related
I am trying to change the width and height of the map. I want to show the map on full width of the page. Map is visible on half of the page without any styles. but when i try to implement styles to change height the map disappears from the page.
here is the full code of my html with the styles in the head tag and map div is at the bottom.
<html ng-app="myApp">
<head>
<!-- Style Sheets includes -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/customstyle.css" rel="stylesheet" type="text/css">
<!-- Script includes -->
<script data-require="angular.js#*" data-semver="1.3.14" src="js/angular.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="data.js"></script>
<script src="app.js"></script>
<script src="initmap.js"></script>
<style>
html, body, #map {
width: 25%;
height: 25%;
margin: 0;
padding: 0;
}
#map {
position: relative;
}
</style>
</head>
<body ng-controller="ApplicationController as appctrl">
<div class="container">
<div id="map"></div>
</div>
Here is the function for Initialize map
//Initializes the map.
function initialize() {
// Initial options. Centers on Sierra Leone.
var mapOptions = {
center: { lat: 8.4494988, lng: -11.7868289},
zoom: 8
};
// Creates the map.
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
Then you change the size of the map div you need to resize the map (resize event of google maps) for a correct view of the content
In your case after change dinamically the size of div you can easily (re) invoke your initialize function...
(better if you before set map to null)
You can embed a basic map, a Street View image, driving directions, or a search into your website or blog from Google Maps.
When your viewers are signed in to Google, they can also see their home and work, saved places, and more in your map.
Get the code
Open Google Maps
Make sure the map or Street View image you'd like to embed shows up on the map.
In the top left corner, click the main menu .
Click Share or embed map.
At the top of the box that appears, choose the Embed map tab.
Choose the size you want, then copy the code and paste it into the source code of your website or blog.
Note: If you're using Maps in Lite mode, you won't be able to embed a map.
I am facing a weird issue with Google Map API V3. I had a previous version of the code, which I migrated to new version V3. The extension is XHTML since this particular file is used as a control in other application. I have created a sample code, which when I execute as stand alone runs fine and displays the google map, but when the similar file is called through another application it is causing an issue where map is loaded but is invisible. Just for information i am using this file from Informatica IDD application. Below is a snippet. Looking for any kind of lead.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://maps.googleapis.com/maps/api/js?&3.21&key=AIzaSyBO11CFgFCL8GnV3-tWZyQOmA8mbO9MP8E&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
/* CONSTANTS */
var geocoder = null;
var map = null;
/* INITIALIZATION */
function initialize() {
alert("initialize");
geocoder = new google.maps.Geocoder();
// Draw the map
/*var startPoint = parseCoordinate(VALUE_SITE_COORDINATE);
alert(startPoint);*/
var startPoint = new google.maps.LatLng(24.886, -70.268);
var mapProp = {
center:startPoint,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map =new google.maps.Map(document.getElementById("map_canvas"),mapProp);
alert("after new map");
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
alert("in idle");
});
var bimage = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
// Set up our GMarkerOptions object
//markerOptions = { icon:blueIcon };
var marker = new google.maps.Marker({
position: startPoint,
map: map,
icon: bimage
});
marker.setVisible(true); // visible_changed triggered
marker.setMap(map);
}
//google.maps.event.addDomListener(window, 'load', initialize);
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width:850px;height:850px;">
<!--<div>
<h:form id="geomap">
<div class="title-bar">
<h:outputText value="Geo Fence Maintenance"/>
</div>
<div style="width:50%;float:left;">
</div>
<div style="width:50%;">
</div>
<div style="width:50%;float:left;">
</div>
<div style="width:50%;">
</div>
<div style="width:100%;padding-bottom:10px;">
<div style="float:left;">
</div>
</div>
<div>
<div id="divCoordinates" style="width:200px;height:200px;float:left;padding-top:5px;padding-left:5px;">
</div>
<div>
<div id="map_canvas" style="width:400px;height:400px;"></div>
</div>
</div>
</h:form>
</div>-->
</div>
</body>
</html>
Further Analysis
I think i found the root cause but not the solution. The issue is my google map is being called through JSF. I guess some update in IE11 is breaking the functionality. The similiar problem i have encountered in link below. http://www.mashups4jsf.com/gmaps4jsf-examples2-3.0.0/pages/mapAjax.xhtml It have google map invisible in IE 11 but shows up when it is opened in firefox. I have similiar kind of issue with IE11. Any suggestion how to fix it?
You have "amp;" in your script src url, but I think that is probably as result of your copy/pasting. Definitely check your src url to make sure you are actually loading the google maps api.
My guess is that your real problem is this line:
google.setOnLoadCallback(initialize);
You are not loading the Google API so google.setOnLoadCallack() does not exist when you are calling it.
Add this to your page just before the script tag for the google maps:
<script src="https://www.google.com/jsapi"></script>
You will need to add your API key if you want it to work for your application when it is deployed to your server.
Alternatively, you could put a callback function in the url for the google maps script:
<script src="https://maps.googleapis.com/maps/api/js?callback=initialize" async defer></script>
I'm trying to get google maps to display on a jquery mobile page.
The map works fine if I type I go directly to the page in the browser. However, when I click a link on another jqm page that goes to the map page, I just get a blank grey screen. The markers are actually there but they are plotted off the viewable area above and to the left of the viewport. Also weird is that I am able to drag on the canvas and bring the markers into view in a small, invisible viewport in the upper left hand corner (probably about 100 px wide and 200 px high), but I can't see the actual map.
Here's a screenshot: https://www.dropbox.com/s/p8berda8dbf6kh4/Screenshot%202015-05-25%2014.24.15.png?dl=0
If I immediately refresh the page after the failed load, everything shows up fine. So I don't think this is an API issue.
And one other oddity. If I wait like 10 min, the map will load properly when I click on the link to view the map. But then the next time I try it fails to load. I have to wait several minutes.
My code is basically ripped right from the jquery mobile site. Here's the relevant code:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://maps.google.com/maps/api/js?sensor=false&key=MY_KEY"></script>
<!-- JQM and other scripts loaded here -->
<script>
$( document ).on( "pagecreate", "#map", function() {
var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);
drawMap(defaultLatLng);
function drawMap(latlng) {
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
new google.maps.Marker({
position: latlng,
map: map,
title: "lat",
});
new google.maps.Marker({
position: new google.maps.LatLng(43.150358,-74.768798),
map: map,
title: 'hello',
});
}
});
</script>
<style>
#map, #map-canvas { width: 100%; height: 100%; padding: 0; }
</style>
</head>
<body>
#calling page
<div data-role="page" data-dom-cache="true" id="doors" data-url="doors" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="position: relative; min-height: 559px;">
<div role="main" class="ui-content" id="">
View map
</div>
</div>
#map page
<div data-role="page" id="map" data-url="map" style="position: relative;">
<div data-role="header" data-theme="a"><h1>Maps</h1></div><div role="main" class="ui-content" id="map-canvas">
</div>
</div>
</body>
</html>
Well, after hours of banging my head against a wall I finally got it working by changing from pagecreate to pageshow. Interestingly pageshow is deprecated in v. 1.4.5 and is supposed to be replaced by pagecontainershow but pagecontainershow does not work.
And as usual, I find the answer within minutes of posting the question.
Hi i've been attempting to load Googlemaps onto the page when the user clicks on the link. I've been attempting to follow Using google maps with angularjs and angular ui but the map doesn't appear. On localhost, the error i get is: no module:map testing. What does no module here imply? I keep running into such errors. It works on JSfiddle for some reason...The working example.
Html file:
<div ng-app='maptesting'>
<div ng-controller="MapCtrl">
<div id="map_canvas" ui-map="myMap"
style="height:300px;width:400px;border:2px solid #777777;margin:3px; border:1px solid"
ui-options="mapOptions"
ui-event="{'map-idle' : 'onMapIdle()'}"
>
</div>
<!--In addition to creating the markers on the map, div elements with existing google.maps.Marker object should be created to hook up with events -->
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
ui-event="{'map-click': 'markerClicked(marker)'}">
</div>
</div>
</div>
The javascript file:
//Add the requried module 'angular-ui' as a dependency
angular.module('maptesting', ['ui.map','ui.event']);
function MapCtrl($scope) {
var ll = new google.maps.LatLng(13.0810, 80.2740);
$scope.mapOptions = {
center: ll,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Markers should be added after map is loaded
$scope.onMapIdle = function() {
if ($scope.myMarkers === undefined){
var marker = new google.maps.Marker({
map: $scope.myMap,
position: ll
});
$scope.myMarkers = [marker, ];
}
};
$scope.markerClicked = function(m) {
window.alert("clicked");
};
}
Live example:
On plunker: here
On JSfiddle: here.
On another note, would it be better to code the google maps and angularjs integration using angularui, from scratch or using google maps with angular? The anuglarui one looks great but when i tried it it didn't work too. I read in a google circle that it wasn't updated for a while which could be why it isn't working well.
Answer:
Yep all I was missing were the script tags. Namely:
<script src="http://www.flocations.com/static/vendor/angular-ui/event/event.js"></script>
<script src="http://www.flocations.com/static/vendor/angular-ui/map/ui-map.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
Your Plunk doesn't have <script></script> elements for ui.map or ui.event. For example, you might want to include these in your <head>:
<script src="ui-event.js"></script>
<script src="ui-map.js"></script>
When I am printing google map; it does not print icons; how can I print complete google map
I am using google maps api v3 for javascript
There are several other questions addressing this issue:
How to print Google Map markers
The short, the Google Maps Javascript API doesn't print overlays (markers, lines) correctly or at all. You can use the Google Maps Static API, but you will be limited to the amount of overlays you draw on the map. This is, however, the best way to get a reliable print.
The long, the markers have the class 'gmnoprint', which disables them from showing up on the printed rendering. You can iterate through the markers and remove this class, which should allow them to be printed on the page. As far as I know, this will not work for the direction lines.
many days trying print the icons and routes, so finally i did it!!!!!!!!
i found a js script that convert html to canvas and i thought that will be the solution but unfortunately it wasn't at all.
if found that, when i use it and says to the browser to print the page finally show it!!!! but the canvas again doesn't show the icons ¿...?
so i just executed the script at the on load and append the result canvas into a div behind the map (if you put display:none don't work!). sorry by my english :)
here a bit code:
<div id="imprimir">
<h1><?php echo $direccion;?></h1>
<div id="distancia"></div>
<div id="map-canvas" style="margin: 0;padding: 0; height: 550px;z-index:10"></div>
<div id="captura" style="position:absolute;top:100px;left:50px;"></div>
</div>
//------------ ...
Google Map code here
//------------ ...
<script>
html2canvas($("#imprimir"), {
onrendered: function(canvas) {
$("#captura").html(canvas);
}
});
</script>
well, i hope this help you!!!
$("#btnPrint").click(function () {
var contents = $("#map_canvas").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});