<html>
<body>
<div>
<div id="map"></div>
</div>
<script>
function initMap() {
console.log('here');
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: { lat: -34.397, lng: 150.644 }
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"></script>
</body>
</html>
Here, in my code I don't get any errors. But the map is not shown. Any reasons why?
I tried your code and it shows an error which is Google Maps API error: InvalidKeyMapError.
The script element that loads the API is missing the required authentication parameter. If you are using the standard Maps JavaScript API, you must use a key parameter with a valid API key. If you are a Premium Plan customer, you must use either a client parameter with your client ID or a key parameter with a valid API key.
See the guide to API keys and client IDs at https://developers.google.com/maps/documentation/javascript/get-api-key
Assign a style (height/width) to your map element
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
Related
I have an ASP.NET Core 2.2 website that creates a map from an address using the google geocoding api and map javascript api. It works in Visual Studio 2017, but when I publish it to Azure, it doesn't work anymore. The map doesn't appear. The developer console shows no errors.
I use the Geocoding API to generate a latlong, from the street address. I added a debug statement to confirm that I am successfully talking to the api, and it does get lat long back.
The website is http://americanhorseproperties.com
<div id="map">
</div>
<a asp-page="./Index">Back to Gallery</a>
<input type="hidden" id="address" value="#Model.house.address
#Model.house.city" />
<script>
// Initialize and add the map
function initMap() {
var geocoder = new google.maps.Geocoder();
//gets address from the address hidden input element in body
var address = document.getElementById('address').value;
//geocodes address and gets latlong
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == 'OK') {
console.log('location: Longitude: ',
results[0].geometry.location.lng());
console.log('location: Latitude: ',
results[0].geometry.location.lat());
var map = new google.maps.Map(document.getElementById('map'), { zoom: 14,
center: results[0].geometry.location });
var marker = new google.maps.Marker({ map: map, position:
results[0].geometry.location }); //sets marker at new lat long
} else {
alert('Geocode was not successful for the following reason: ' +
status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=KEY_REMOVED&callback=initMap">
</script>
It seems you need to set "height" property for <div id="map">
CSS Problem.
The Google Maps API automatically adds the CSS properties "position: relative; overflow: hidden;" to the div that is used for displaying the map. When I manually remove any of these two properties in the developer console of the browser, the map becomes visible.
Make sure the div has a size that the map can fill.
Hi I am new to meteor and I am working on my first application beyond the tutorial. I am coming from a node + express world. I am currently trying to transform an application I built on Node+express using the google maps java script api v3 into a meteor application so that I may be able to distribute it to specific devices. In my trials I got the app working locally on the web by placing my map code into the head element of my html page and it ran as intended. Once I tried to import it onto an android device I received the error :
Uncaught ReferenceError: google is not defined
from that error it led me to this post telling me to move my map code into a Template.rendered function because the meteor script is being run before the google maps api is being loaded which seemed correct. I followed the instructions on that post and I am now being served with a new error stating :
Uncaught TypeError: Cannot set property 'rendered' of undefined
Through googling this took me to this blog post in reference to my error. It states that there is an issue in the order I am loading my html page in. It guides you to change your packages.json file to restructure the order that your files are being served in. The issue here was my packages file is not similarly set up the way hers is and I am having trouble relating it to her file. Any advice would be appreciated I will include code below for my current application.
Html:
<head>
<title>Google Maps App</title>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYKEYHERE&sensor=true">
</script>
</head>
<body>
<template name="maps">
<div id="map-canvas"></div>
</template>
</body>
js:
if (Meteor.isClient) {
Template.maps.rendered = function() {
var map;
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);
}
google.maps.event.addDomListener(window, 'load', initialize);
}
}
if (Meteor.isServer) {
Meteor.startup(function () {
});
}
packages:
meteor-platform
autopublish
insecure
twbs:bootstrap
fortawesome:fontawesome
jquery
Thank you for your time in advance. Please let me know if there is anything I can include that would be more helpful.
EDIT 1: Currently looking into using this meteor package for googlemaps with javascript api v3 will post updates.
wich meteor version are you using?
run meteor --version and if is under 1.0.4 change the rendered to this(rendered = function() was depurated), now we use onRendered .
Template.maps.onRendered(function(){
//map code here
});
Also you don't need the google.maps.event.addDomListene here, you can do it more like this.
//appName/client/helpers.
initMap = function(){
var map;
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);
}
//appName/client/views/map/map.js
Template.maps.onRendered(function(){
initMap
});
But the code its ok. check this junk DEMO
UPDATE
This is how the html should look.
<head>
<title>Google Maps App</title>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDG1mocxosoC9cq-ucFO3vdZCcUxyKa6B4&sensor=true">
</script>
</head>
<body>
{{> maps}}
</body>
<template name="maps">
<div id="map-canvas"></div>
</template>
And the Javascript.
Template.maps.onRendered(function(){
initMap();
})
initMap = function(){
var map;
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
Good morning all,
I'm Danny, and I'm a Salesforce system admin and (very) junior developer currently trying to integrate Nokia's HERE maps into our system as it's public transport options are vastly superior to Google's. This is done in Salesforce with Visualforce. I've been successful in using our Enterprise id and key to call and display a route on a dynamic map, but am having some trouble with geocoding. I'm having some issues with the element below:
<head>
<script type="text/javascript" charset="UTF-8" src="https://js.cit.api.here.com/ee/2.5.3/jsl.js?with=maps,positioning,places,directions"></script>
<style type="text/css">
html {
overflow:hidden;
}
body {
margin: 0;
padding: 0;
position: absolute;
overflow:hidden;
width: 100%;
height: 100%;
}
#mapContainer {
width: 60%;
height: 95%;
left: 0;
top: 10px;
position: absolute;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript" charset="UTF-8" src="https://js.cit.api.here.com/ee/2.5.3/jsl.js?with=maps,positioning,places,directions"></script>
<script type="text/javascript">
nokia.Settings.set("app_id", "V6tmpXy6GHXqJWlaPVmh");
nokia.Settings.set("app_code", "XS4Tjj82QznkWAJJu0L3-g");
nokia.Settings.set("serviceMode", "cit");
(document.location.protocol == "https:") && nokia.Settings.set("secureConnection", "force");
var map = new nokia.maps.map.Display(
document.getElementById("mapContainer"), {
components: [
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.map.component.ScaleBar(),
new nokia.maps.map.component.ContextMenu(),
],
});
var modes = [{
type: "fastest",
transportModes: ["car"],
trafficMode: "disabled"
}];
// GeoCode
nokia.places.search.manager.geoCode({
searchTerm : "{!Transport_order__c.From_Address__c}",
onComplete: onGeocodeComplete
});
// Post GeoCode
function onGeocodeComplete(data, requestStatus) {
var marker;
if (requestStatus === 'OK') {
alert('GEOCODE ENDED SUCCESSFULLY');
marker = new nokia.maps.map.StandardMarker(data.location.position);
map.objects.add(marker);
map.zoomTo(marker.getBoundingBox(), false);
if (map.get('zoomLevel') > 15) {
map.setZoomLevel(15);
}
} else if (requestStatus === 'ERROR') {
alert('GEOCODE FAILED.');
}
}
</script>
</body>
I read from a post on this site that the Enterprise version treats nokia.places.search etc. as an instance rather than a function to be called. This makes sense, as changing the URL to SE rather than EE seems to make the geocode request run fine, however our internal system rejects the response as it's not in HTTPS (which can be forced 'on' with Enterprise).
The issue I'm having is that I'm not familiar enough with Java to truly understand what the difference is, or rather, I don't know what to do with calling upon the instance. At present, the java console in Chrome is telling me that search is an undefined type error, which isn't helpful, and I can't find any further guidance anywhere I search! Can anyone help me out in differentiating between Enterprise/ Standard guidance on this?
Thanks!
The issue here is that there are two JavaScript APIs available, and in your case you need to be using the Enterprise Maps JS API not the public Maps JS API. The geocoding in the Enterprise Maps JS API (nokia.search.Manager) is different to the public offering and more flexible. The geocoding signature in the public Maps JS API (nokia.places.search.manager) is part of the places offering and is more restricted.
As an enterprise customer, the only documentation you’ll need is (pardon the pun) HERE
The associated set of examples can be found in the enterprise explorer
A geocoding example using the Enterprise Maps JS API can be found HERE, look at the code and note that it uses the nokia.search.Manager()
Currently Truck Routing is only available in the 6.2 enterprise routing API, whereas Public Transport routing is only available in the 7.2 routing API. This means that in order to use the public transport with the Enterprise Maps JS API, you’ll need use a nokia.maps.advrouting.Manager and contact the underlying rest service. An example of this can be found in the Community Examples
I'm looking to simply add a google map using google maps api to one of my pages in WordPress. Is there a simple way of simply copy and pasting the "Hello, World" google maps code somewhere to have the map displayed on a page?
thanks
Yes, there's no need for a plugin for something like this. First of all you would include the Google maps script in header.php or you could enqueue it;
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
Then I normally add the following in header.php - this adds conditional code to the tag for the page containing the map only (in this case page 374);
<body <?php if (is_page(374)) { echo 'onload="initialize()" onunload="GUnload()"'; } ?>>
And then I would create a custom template for the contact page (as that's the page the map is normally on) and in the template for that page include something like the following. Yes, it's probably a bit long for a code sample but I'm just giving you a real example which contains an animated marker which can be clicked on to show your client's address. You could change the inline dimensions to suit your design, and you can also offset the map so the marker isn't right smack in the middle of it.
<div id="contact-content">
<script type="text/javascript">
function initialize() {
var leeds = new google.maps.LatLng(53.80583, -1.548903);
var firstLatlng = new google.maps.LatLng(53.80583, -1.548903);
var firstOptions = {
zoom: 16,
center: firstLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_leeds"), firstOptions);
firstmarker = new google.maps.Marker({
map:map,
draggable:false,
animation: google.maps.Animation.DROP,
title: 'Your Client',
position: leeds
});
var contentString1 = '<p>The Address<br />Of your client<br />in<br />here</p>';
var infowindow1 = new google.maps.InfoWindow({
content: contentString1
});
google.maps.event.addListener(firstmarker, 'click', function() {
infowindow1.open(map,firstmarker);
});
}
</script>
<div class="map">
<div id="map_leeds" style="width: 600px; height: 600px"></div>
</div>
</div>
If anyone else does it a different, better way then I'd be keen to see it, but I've used this on loads of sites and it works really well.
i am new to google maps,
and i would like to integrate it into my website ( Yellow pages kind of site ).
i currently have the following code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 500px; height: 300px; position: relative; background-color: rgb(229, 227, 223);"></div>
</body>
</html>
This code does work, and showing me the map for the specific Lat/Long
but, i want to be able to specifiy an address and not lat/long params,
since i do have the addresses of the companies in the phonebook, but do not have the lat/long values.
i tried searching for this, but i only found something similar on the V2 version, which was deprecated.
What you are looking for is Geocode feature in google service; first give an address to get a LatLng, then call setCenter to pan the map to the specific location. Google's API wrapped it very good and you can see how it works through this example:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You can use the google geocoder: http://code.google.com/apis/maps/documentation/geocoding/ Be careful - you can be out of quota and so the request to the geocoder will failed
Use of the Google Geocoding API is subject to a query limit of 2,500 geolocation requests per day.
If you are okay with an iframe, you can skip the geocoding hassle and use the Google Maps Embed API:
The Google Maps Embed API is free to use (with no quotas or request
limits), however you must register for a free API key to embed a map
on your site.
For example you would embed this into your page (replacing the ellipsis with your own personal Google API key):
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?
q=301+Park+Avenue,+NY,+United+States&key=..."></iframe>
Obviously the usefulness of this will depend on your use case but I like this as a quick and dirty solution.
There is a plugin for jQuery that makes it, it's name is gMap3, and you can see it in action here:
http://gmap3.net/examples/address-lookup.html
and here
http://jsfiddle.net/gzF6w/1/
gmap3 doesn't actually do it for you, as suggested by another answer: it just gives you an API to abstract-away the geocoding part of the process.
The answer is: Google doesn't actually allow you to do that anymore. At least not in V3, and since that's been around for more than a year...
You could actually send addresses for driving directions, but their API has made it illegal to send an address for a normal (embedded, API-based) map of any sort. The daily quota on geocoding is their play at "still allowing" addresses while in reality completely disallowing them for any real website.
You can link to a map with an address, though I cannot find this in Google's docs either:
http://maps.google.com/maps?f=d&saddr=&daddr=this is my address, city state
Maybe I just have a problem with this because they don't provide any clear, easy documentation - I have to come to StackOverflow to get the answers I'm looking for. Ie. they vaguely mention you need an API key to bypass the anonymous limits, but do not link either to what those limits are or how to use their API without a key. Which is what I want to do for skunkworks or proof-of-concept development. Instead Google wants to push their Maps for Businesses, etc., instead of providing actual information.