I’m having a problem with the implementation of google maps within my phonegap build. I have this problem in the browser on my pc and on the Phone itself. When I have the code in isolation it works and shows a map but when I have it within the rest of the code nothing seem te happen. Please help me with this.
<!doctype html>
<html>
<head>
<title>Huisartspraktijk app</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- /jquery links en scripts. NIET VERWIJDEREN!! -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<style>
/* css styes for the maps */
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- Script for the geolocation, Stack Overflow -->
<script>
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//onDeviceReaddy
initMap(); //Google map
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
}
// user Current Position
function displayAndWatch(position) {
setCurrentPosition(position);
watchCurrentPosition();
}
function setCurrentPosition(pos) {
var image = 'img/ic_CurrentLocationmap.png';
currentPositionMarker = new google.maps.Marker({
icon: image,
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Location"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
function watchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
var center = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
map.setCenter(center);
}
function locError(error) {
// the current position could not be located
}
});
</script>
</head>
<body>
<!-- The mobile page in html5, within this page there is a DIV containing the Java Script to summon google maps -->
<div data-role="page" id="mobiel">
<!-- /header -->
<div data-role="header">
<h1>SPOED</h1>
<div data-role="navbar">
<ul>
<li>Mainpage</li>
<li>Chat met de arts</li>
<li>Consultaanvraag</li>
<li>Doorverwijzing</li>
<li>Bloedonderzoek</li>
<li>Berichten</li>
<li>EPD</li>
<li>Mijn medicijnen</li>
</ul>
</div>
</div>
<!-- /content -->
<div role="main" class="ui-content" align="center">
<h2> "Ga naar deze medische post. Men is op de hoogte van uw komst" </h2>
<div style="background-color: lightyellow">
<br>
<h3> Huisartsenpraktijk Gideonse en Boekhout </h3>
<p>Meteorenstraat 4<br>
2024 RK, Haarlem</p>
<p>Telefoon<br>
023 - 525 36 00 </p>
<p>Keuze 1: Spoed <br>
Keuze 2: Herhaalrecepten <br>
Keuze 3: Assistentie</p>
<br>
<!-- In this DIV you will find a small Java Script for summoning Google maps. But some how it won't work, Google maps won't show within this DIV. -->
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap"
async defer></script>
</div>
Terug
</div>
<!-- /footer -->
<div data-role="footer">
<h2>© 2019 Huisartsapp</h2>
</div>
</div><!-- /page -->
</body>
</html>
Check Your API Key.
It's Getting ExpiredKeyMapError
https://developers.google.com/maps/documentation/javascript/error-messages#expired-key-map-error
Go to -> https://console.cloud.google.com
Select your Project.
And Create New API Key and Try It.
After Add new API key and check your Style
Check Overflow style.
Your Code Works fine Only API Key Is the Problem.
Related
I have a page that will show up a popover that has contact list, one of the list is a map location (google map).
All the lists are shown when popover is called, except google map. Google map only show gray background, but when I inspected it, it shows my coordinated I've input. And when I move it to the outside of pop over it shows no problem.
I've tried to reignite/resize the map when the popover is shown using shown.bs.popover function, but it failed.
here is the plunkr http://plnkr.co/edit/VWiCzhpiOyEMmfRoxaIy?p=preview
here is my code snippet
// Code goes here
$(function() {
//show popover
$('[data-toggle="popover"]').popover({
html: true,
container: 'body',
content: function() {
var getID = $(this).attr("id");
switch (getID) {
case "contact-us":
return $('#list-popover').html();
}
}
});
});
$(document).ready(function() {
$("[data-toggle='popover']").on('shown.bs.popover', function() {
reignitMap();
// console.log(popo);
});
});
//variable used to try reignite map when popover is shown
var googleMap = {};
function initMap() {
// console.log("initiating map");
googleMap.myPosition = {
lat: -6.2126170,
lng: 106.8228290
};
googleMap.map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: googleMap.myPosition
});
googleMap.marker = new google.maps.Marker({
position: googleMap.myPosition,
map: googleMap.map
});
};
function reignitMap() {
// console.log("reignit map");
google.maps.event.trigger(googleMap.map, "resize");
googleMap.map.setCenter(googleMap.myPosition);
};
/* Styles go here */
#map {
width: 110%;
height: 15em;
background-color: grey;
}
.popover {
max-width: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div class="formLabelRight displayTable col-xs-2 col-md-2 ">
<div class="alignMiddle">
<a href="javascript:;" id="contact-us" class="linkFont" data-toggle="popover" data-placement="bottom">
<span> Contact Us</span>
</a>
</div>
</div>
<div class="container">
<div id="list-popover" class="hide col-xs-12 col-md-12" style="width:100px;">
<div class="col-xs-12 col-md-12" style="display: block;">
<div class="row">
<p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah
kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun.</p>
</div>
<!--
View Branch Locator -->
<div id="map" class="col-xs-10 col-md-10"></div>
</div>
</div>
</div>
<!-- <div id="map" class="col-xs-10 col-md-10"></div> -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4MzPKw9W1RlCgQcctcWmlktTfqQLhMC8&callback=initMap"></script>
</body>
</html>
Google Map not loading.
only blank div is displaying
here my code snippet
<div id="map-container" class="col-md-9 col-sm-12">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function init_map() {
var var_location = new google.maps.LatLng(35.710107,73.039610);
var var_mapoptions = { center: var_location, zoom:17 };
var var_marker = new google.maps.Marker({ position: var_location, map: var_map, title:"Test"});
var var_map = new google.maps.Map(document.getElementById("map-container"), var_mapoptions);
var_marker.setMap(var_map);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
i think my logic is right. can anyone help me to figure it out what the problem is.
Thnx in advance. . . !
<div class="col-md-9 col-sm-12">
<div id="map-container" style="width: 100%; height:400px;"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function init_map() {
var var_location = new google.maps.LatLng(35.710107,73.039610);
var var_mapoptions = { center: var_location, zoom:17 };
var var_marker = new google.maps.Marker({ position: var_location, map: var_map, title:"Test"});
var var_map = new google.maps.Map(document.getElementById("map-container"), var_mapoptions);
var_marker.setMap(var_map);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
You need to create another div for the map container and add the width & height for this.
First of all, you need an API Key, which you don't seem to have.
then basically just follow the google maps api tutorial, like you seem to have sorta been doing.
<style>
#map {
height: 400px;
width: 400px;
}
</style>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
(https://developers.google.com/maps/documentation/javascript/examples/map-simple)
I'm new here and hoping to get assistance in what I'm missing in my html file.
I have this google map code that works completely fine when I placed it on wix for my mock up design.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
{
"title": 'Bancroft Medical Center',
"lat": '39.755597',
"lng": '-75.570262',
"description": '<b>Brandywine Podiatry</b><br>Bancroft Medical Center<br> 1010 North Bancroft Parkway<br> Wilmington, DE 19805<br>(302) 658-1129'
},
{
"title": 'Silverside Professional Center',
"lat": '39.8010954',
"lng": '-75.5038161',
"description": '<b>Brandywine Podiatry</b><br>2106 Silverside Road<br> Wilmington, DE 19810<br>(302) 478-8099'
},
{
"title": 'Becks Woods Plaza',
"lat": '39.616351',
"lng": '-75.699592',
"description": '<b>Brandywine Podiatry</b><br>Becks Woods Plaza<br>121 Becks Woods Drive<br> Bear, DE 19701<br> (302) 595-4077'
},
{
"title": 'Omega Professional Center',
"lat": '39.6920102',
"lng": '-75.6771784',
"description": '<b>Brandywine Podiatry</b><br>Omega Professional Center<br>B-89 Omega Drive<br> Newark, DE 19713<br>(302) 595-4077'
},
{
"title": 'Ketlay Plaza',
"lat": '39.452119',
"lng": '-75.729465',
"description": '<b>Brandywine Podiatry</b><br>Ketlay Plaza<br>114 Sandhill Drive<br> Middletown, DE 19709 <br>(302) 595-4077'
},
{
"title": 'Glasgow Professional Center',
"lat": '39.5993024',
"lng": '-75.7448504',
"description": '<b>Brandywine Podiatry</b><br>Glasgow Professional Center<br>2600 Glasgow Ave.<br> Newark, DE 19702<br> (302) 595-4077'
}
];
window.onload = function () {
LoadMap();
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(39.6057218,-75.5820083),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
//Create and open InfoWindow.
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
//Attach click event to the marker.
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
//Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
infoWindow.setContent("<div style = 'width:100%;min-height:100%'>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
<div id="dvMap" style="width:100%;min-height:100%">
</div>
Now that I'm building the site and applying it to my html file, the map disappears.
=====
Below is my HTML file.
<!doctype html>
<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">
<link href="bpo-theme.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,800,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<title>BPO</title>
<!--MENU-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<!--MAPS-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="googlemap-api.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>For Patients</a></li>
<li><a href='#'>Our Doctors</a></li>
<li><a href='#'>Foot & Ankle Conditions</a></li>
<li><a href='#'>Forms</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<div style="background-image:url(images/Bancroft.jpg); background-size:cover; height:500px; text-align:center; color:#ffffff;">
<br><h1>Welcome to Delaware's Premiere Foot & Ankle Center</h1>
<div class="section group">
<div class="col span_1_of_3">
<div class="pad white"><h4>FOOT & ANKLE</h4>TYPES OF CONDITIONS
</div>
</div>
<div class="col span_1_of_3">
<div class="pad white">
<h4>FOR PATIENTS</h4>NEW & CURRENT
</div>
</div>
<div class="col span_1_of_3">
<div class="pad white">
<h4>PATIENT FAQS</h4>FOR YOUR VISIT
</div>
</div>
</div>
</div>
<div class="section group">
<div class="col2 span_1_of_2">
<div style="padding:10%;">
<h4 class="grayheadr">OFFICE LOCATION</h4><br>
<!--Bancroft-->
<h5>Bancroft Medical Center</h5>
1010 North Bancroft Parkway,<br>
Wilmington, DE 19805 <br>
<h5>(302) 658-1129</h5><br>
M: 8am-4:30pm<br>
T: 8am-6pm<br>
W: 8am-5pm<br>
T: 8am-4:30pm<br>
F: 8am-1:30pm
<hr class="solid">
<!--Silverside-->
<h5>2106 Silverside Professional Center</h5>
2106 Silverside Rd.<br>
Wilmington, DE 19810<br>
<h5>(302) 478-8099</h5><br>
Monday: 8am-4:30pm<br>
Tuesday: 8am-6pm<br>
Wednesday: 8am-4:30pm<br>
Thursday: 8am-4:30pm<br>
Friday: 8am-4pm<br>
<hr class="solid">
<!--Becks Woods-->
<h5>Becks Woods Plaza</h5>
121 Becks Woods Dr.<br>
Bear, DE 19701<br>
<h5>(302) 595-4077</h5><br>
Monday: 8am-4:30pm<br>
Tuesday: 8am-6pm<br>
Wednesday: 8am-6pm<br>
Thursday: 8am-4:30pm<br>
Friday: 8am-1:30pm<br>
<hr class="solid">
<!--Omega-->
<h5>Omega Professional Center</h5>
B-89 Omega Drive<br>
Newark, DE 19713<br>
<h5>(302) 595-4077</h5><br>
Monday: 12:30pm-5:30pm
<hr class="solid">
<!--Ketlay-->
<h5>Ketlay Plaza</h5>
114 Sandhill Drive<br>
Middletown, DE 19709<br>
<h5>(302) 595-4077</h5><br>
Thursday: 8am-5:30pm
<hr class="solid">
<!--Glasgow-->
<h5>Glasgow Professional Center</h5>
2600 Glasgow Ave.<br>
Newark, DE 19702<br>
<h5>(302) 595-4077</h5><br>
Wednesday: 8:00am-10:30pm
<!--locations end-->
</div>
</div>
<div class="col2 span_1_of_2">
<div class="pad">
<div id="dvMap" style="width:100%;min-height:100%"></div>
<br>
<h4 class="grayheadr">ABOUT US</h4><br><br>
At Brandywine Podiatry, we understand that successful treatment takes into consideration the elements of comfort, aesthetics and functionality -we strive to provide solutions that address each of these elements to achieve the optimal health of each of our patients.<br><br>
Please call one of our office near you to schedule your initial, new patient consultation today and let Brandywine Podiatry help get you back on your feet again. more »<br><br>
</div>
</div>
</body>
</html>
It is probably the Height issue. To show a google map on your page, your map div MUST have a effective height. If you set height as 100%, then its direct parent should have a fixed height (e.g.800px), but if the direct parent height is also set as 100%, then the parent's direct parent should have a fixed height (e.g. 500px) and so on and so forth.
Remember, the 100% height is relative to its parent, the parent itself or one of it's super must have a fixed height. If all the parents to the <html> are specified 100% then it shall occupy the entire window, thus it automatically has a fixed height.
I want to load 2 google maps using 1 initialize functions on the same page using division class. But the maps are not getting loaded. Can anyone help?
Here is my code:
<!DOCTYPE html>
<html>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp">
</script>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map(document.getElementsByClassName('map-canvas'),
mapOptions);
}
</script>
<body>
<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;" >
<script>
initialize();
//google.maps.event.addDomListener(window,'load',initialize);
</script>
</div><!-- /.panel-body -->
<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;" >
<script>
initialize();
//google.maps.event.addDomListener(window,'load',initialize);
</script>
</div><!-- /.panel-body -->
</body>
</html>
Ok there are some mayor problems in you source:
Invalid HTML structure
Your script has to be placed in the head tag above the body tag like:
<head>
<title></title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp">
</script>
<script>
var map;
var map2;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map2 = new google.maps.Map(document.getElementById('map-canvas2'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
You can't initialize the google map by a container class name. All containers had to be unique. As you can see i am creating 2 individual maps 'mapandmap2` and therefore i need two seperate containers in the body tag like:
<div id="map-canvas"></div>
<div id="map-canvas2"></div>
You don't have to call the initialize function in your body tag because it will be called throught the eventListener on window - load
google.maps.event.addDomListener(window, 'load', initialize);
So lets bring it all together:
FIDDLE
getElementsByClassName returns an array of elements
you need to run the initialize function once the document onload event has fired.
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
elems = document.getElementsByClassName('map-canvas');
for (var i = 0; i < elems.length; i++) {
var map = new google.maps.Map(elems[i],
mapOptions);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;">
</div>
<!-- /.panel-body -->
<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;">
<script>
initialize();
//google.maps.event.addDomListener(window,'load',initialize);
</script>
</div>
<!-- /.panel-body -->
So I've got a test site that uses Google's Chart API. I wanted to put an Adsense banner on this site. When I add the Adsense code the chart won't display, but the ad does. Take the Adsense code out and the chart displays just fine.
EDIT: Doesn't matter where the Adsense code is put either. If it's there, the chart is not.
Here's the entire page:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Price'],
['Yesterday', 10.00],
['Today', 12.00],
]);
var options = {
title: 'kyurem'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div>
<h3>doeiqts's Pokemon Price Guide</h3>
</div>
<div id="adsense">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-4255182576260971";
/* Pokemon Graph */
google_ad_slot = "2704848389";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="cardPicture" style="height: 400px; width: 227px; float: left;">
<img src=http://pokegym.net/gallery/displayimage.php?imageid=53682 style="height: 320px; width: 227px; position: relative; top: 80px;" />
</div>
<div id="chart_div" style="width: 900px; height: 500px; float: left;"></div>
<div style="clear: both;">
<p>
<br>
<p>
This site is not affiliated with Nintendo, Pokemon, PokeGym, or eBay.
</div>
</body>
</html>