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.
Related
I have a concern about the google maps plugin used with Onsen UI:
Google Maps Plugin
When my google maps div (canvas) is located directly in the index.html page, I can show the google map perfectly.
When I travel to any other page through the Onsen UI side menu, google map cannot display anymore on any of the pages travelled to. And when I travel back to the index.html page, it does not work anymore (maps appear in white).
If I put in the navigator definition any start page attribute, it does not work neither ( ons-navigator id="navi" page="start_page" /ons-navigator) That is why I only let : ons-navigator id="navi" /ons-navigator
I know there is a similar topic about that problem but it has been closed and problem was not fixed : github.com/mapsplugin/cordova-plugin-googlemaps/issues/324
I attach a pdf file to describe the sequence and the problem (you can see it online without downloading):
PDF_problem_description
Thank you very much for your help
Here is my Index.html :
<!DOCTYPE html>
<html lang='en' ng-app='app'>
<head>
<!-- meta Charset-->
<meta charset='utf-8'>
<script src='js/angular.min.js'></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<link rel='stylesheet' href='onsenui/css/onsenui.css'/>
<link rel='stylesheet' href="css/onsen-css-components.css"/>
<script src='onsenui/js/onsenui.js'></script>
<script src='onsenui/js/angular-onsenui.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<meta name='viewport' content='user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width'>
</head>
<body ng-controller="AppCtrl">
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable >
<ons-page>
<ons-list>
<ons-list-item>
<div class="text_menu_color" ng-click="fn.load('index.html')">Index</div>
</ons-list-item>
<ons-list-item>
<div class="text_menu_color" ng-click="fn.load('html/dashboard.html')">Dashboard</div>
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content>
<ons-navigator id="navi"></ons-navigator>
</ons-splitter-content>
</ons-splitter>
<h3>Index.html</h3>
<div id="map_canvas_1" style="position:fixed;width:160px;height:320px;left:10px;bottom:150px;background: blue;border: 2px solid black"><h3>map 1</h3></div>
<button ng-click="show_map_1()" style="position:fixed;width:160px;height:100px; left:10px;bottom:30px">Show map 1</button>
<script>
ons.platform.select('android')
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {window.powermanagement.acquire()}
angular.module('app', ['onsen'])
.controller('AppCtrl', function($scope) {
$scope.show_map_1 = function(){
$scope.map_1=""
$scope.map_1 = plugin.google.maps.Map.getMap(document.getElementById('map_canvas_1'));
$scope.map_1.addEventListener(plugin.google.maps.event.MAP_READY, $scope.onMapReady_1)
}
$scope.show_map_2 = function(){
$scope.map_2=""
$scope.map_2 = plugin.google.maps.Map.getMap(document.getElementById('map_canvas_1'));
$scope.map_2.addEventListener(plugin.google.maps.event.MAP_READY, $scope.onMapReady_2)
}
$scope.onMapReady_1 = function() {
$scope.map_1.setDiv(document.getElementById('map_canvas_1'))
$scope.map_1.refreshLayout();
$scope.map_1.setBackgroundColor('green')
}
$scope.onMapReady_2 = function() {
$scope.map_2.setDiv(document.getElementById('map_canvas_2'))
$scope.map_2.refreshLayout();
$scope.map_2.setBackgroundColor('green')
}
$scope.fn = {};
$scope.fn.load = function(page) {
var menu = document.getElementById('menu');
var navi = document.getElementById('navi');
menu.close();
navi.resetToPage(page, {animation: 'slide', animationOptions:{duration: 0.4, delay: 0, timing: 'ease-in'}});
};
})
</script>
</body>
</html>
Here is my Dashboard.html :
<ons-page>
<h3>Dashboard.html</h3>
<div id="map_canvas_2" style="position:fixed;width:160px;height:320px;right:10px;bottom:150px;background: blue;border: 2px solid black" ><h3>map 2</h3></div>
<button ng-click="show_map_2()" style="position:fixed;width:160px;height:100px; right:10px;bottom:30px" >Show map 2</button>
</ons-page>
OnsenUI adds dynamically a background div for pages, inspect you map container element and check as all parents must be transparent with this css style background-color: rgba(0,0,0,0);
For me, there's div hiding the map with class "page--background" which is not dynamically set to transparent by the plugin (because it's a no parent div with absolute position), sample :
<div class="page__background page--material__background" __plugindomid="pgm423934967639"></div>
<div class="page__content page--material__content _gmaps_cdv_" __plugindomid="pgm1136479823937">
<div id="mymap-container" class="gmap-container _gmaps_cdv_" __pluginmapid="map_0_147744461355" style="background-color: rgba(200, 200, 200, 0.5); position: relative; overflow: hidden;" __plugindomid="pgm888819903812"><div __plugindomid="pgm1177970622685" style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; overflow: visible; z-index: 0;"></div></div></div>
I apply the transparent background style with jQuery once the map is initialized to reveal it:
mapDiv = document.getElementById("mymap-container");
myMap = plugin.google.maps.Map.getMap(mapDiv);
myMap.one(plugin.google.maps.event.MAP_READY, myMapInit);
myMapInit = function () {
console.log("Map init done!"); // DEBUG
$(".page__background").css( "background-color", "rgba(0,0,0,0)" );
}
This is explained here (bottom of page): https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md
I managed to solve the problem.
For those who get the same trouble using the google maps plugin with Onsen UI, use google maps without the plugin, and it will work perfectly, no matter the page you travel to, through the onsen navigator.
Somebody already posted an explanation on how to use google maps without the plugin. It works very well:
Using google maps without plugin
Cheers
I've been trying to develop a UWP App, which uses Google maps API. So, I have created 2 projects -
1) a XAML UWP project
2) a JS UWP project
When I run both, the map is visible in the JS project, but not in the XAML one. The page only shows "Content goes here.", and a blank space below it in the XAML app. I have followed the documentation given in the website.
The XAML App output
The JS App output
Here is the html -
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<!-- mapframe references -->
<link href="/map.css" rel="stylesheet" />
<script src="/map.js"></script>
</head>
<body>
<div>Content goes here.</div>
<div id="mapwindow"></div>
</body>
</html>
And the js is as follows -
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('mapdisplay'), {
zoom: 3,
center: new google.maps.LatLng(40, -187.3),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
}
google.maps.event.addDomListener(window, 'load', initialize);
And the CSS is -
html, body, #mapwindow {
margin: 0;
padding: 0;
height: 100%;
}
Thanks in advance!
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.
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.
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>