I'm playing with the Firefox addon Ubiquity. I'm trying to put a custom google map on the preview page. The page should contain the following:
<html>
<head>
<title>Google Maps Multiple Markers</title>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY" type="text/javascript"></script>
</head>
<body>
<div id="map" style="height: 400px; width: 500px;"></div>
<script type="text/javascript">
var locations = ['Bondi Beach', 'Coogee Beach', 'Cronulla Beach', 'Manly Beach', 'Maroubra Beach'];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker, i;
var geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
console.log("coding " + locations[i]);
geocoder.geocode({'address': locations[i].toLowerCase()}, 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);
}
});
}
</script>
</body>
</html>
But the locations variable should be set by the input. The idea is to let the user map multiple locations (this functionality was once there, I'm trying to remake it). I've tried simply settings the pblock.innerHTML with that, but while it seems that it gets the input, nothing appears. I've tried reverse engineering the functionality of the default map command but I don't understand how it works.
I solved this by copying the whole file containing the map command and cutting all parts until I was left with only the parts that I needed. I'm still not sure why my old solution was not working though..
Related
How is it possible to use the Google Maps API with AngularJS?
I am using this code in my AngularJS app:
<style>
#googleMap {
width: 200px;
height: 200px;
}
</style>
<div id="googleMap"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script language="javascript">
var map;
function initialize() {
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
This code is in the view and not in the controller.
I have other functions in the view and they work, but google map is still not working.
This is the error I get in the browser console:
Error: google is not defined
#http://localhost:3000/js/jquery-1.11.2.min.js line 2 > eval:10:2
.globalEval/<#http://localhost:3000/js/jquery-1.11.2.min.js:2:2615
.globalEval#http://localhost:3000/js/jquery-1.11.2.min.js:2:2589
.domManip#http://localhost:3000/js/jquery-1.11.2.min.js:3:23105
.after#http://localhost:3000/js/jquery-1.11.2.min.js:3:21067
Cehttp://localhost:3000/js/angular/lib/angular.min.js:176:70
n#http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:5868
.compile/http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:6428
Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:128:120
p#http://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:2649
this.$gethttp://localhost:3000/js/angular/lib/angular-route-segment.min.js:7:3989
f/<#http://localhost:3000/js/angular/lib/angular.min.js:112:20
Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:125:301
Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:122:390
Pe/this.$gethttp://localhost:3000/js/angular/lib/angular.min.js:126:56
l#http://localhost:3000/js/angular/lib/angular.min.js:81:169
S#http://localhost:3000/js/angular/lib/angular.min.js:85:301
vf/http://localhost:3000/js/angular/lib/angular.min.js:86:315
What am I doing wrong?
I searched the web but everyone seems to be using libraries like angular-google-map or ui-map. Why is no one using the direct API?
You can implement google maps in angularjs without using any plugins like this,
<!--use this div where ever you want to create a map-->
<div id="map"></div>
define the width and height for map div,
#map {
height:420px;
width:600px;
}
in controller you glue this id="map" with scope like this,
$scope.mapOptions = {
zoom: 4,
center: new google.maps.LatLng(41.923, 12.513),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), $scope.mapOptions);
if you want to create markers for the cities or countries you want,
var cities = "Atlanta, USA";
var geocoder= new google.maps.Geocoder();
$scope.markers = [];
var createMarker = function (info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat(), info.lng())
});
}
geocoder.geocode( { 'address': cities }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
newAddress = results[0].geometry.location;
$scope.map.setCenter(newAddress);
createMarker(newAddress)
}
});
Last but not least make sure you added the google maps api script before doing all this stuff,
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>
Here is the working plunker with this code, inside a bootstrap model,
http://embed.plnkr.co/VT7cO0L2ckSWG6g63TVG/preview
Reference
Hope this helps!
It was late to post but I have done this as solution. By this there is no need to add the google map script src in the head of the html or there is no chance of any error for google map src related errors. The script will be added automatically by the loadScript function. In angular it is needed to add new js src in partials rather than the head of main script. So I think this will be the best solution
I used this code chunk into my controller.
$scope.initialize = function() {
$scope.mapOptions = {
zoom: 8,
center: new google.maps.LatLng(22.649907498685803, 88.36255413913727)
};
$scope.map = new google.maps.Map(document.getElementById('googleMap'), $scope.mapOptions);
}
$scope.loadScript = function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.google.com/maps/api/js?sensor=false&callback=initialize';
document.body.appendChild(script);
setTimeout(function() {
$scope.initialize();
}, 500);
}
setTimeout is there because some time is needed for google map src to be downloaded and be ready. & callback=initialize is needed because by this google map will be ready for a callback.The main problem was that the code google.maps.event.addDomListener(window, 'load', initialize) was not executing if I add the google map src in partial rather than the head of main index.html. But this setup works flawlessly.
And this chunk to the html
<div class="form-group col-lg-12" id="googleMap">
<center>Waiting for the map...</center>
</div>
Now place ng-init="loadScript()" anywhere in any outer div so that loadScript initializes before.
I want to add a map to my site to show a local business, but I don't want to use an image, I wanted to use google maps like I have seen on some websites.
I tried using this:
https://developers.google.com/maps/documentation/javascript/reference#MapOptions
But it doesn't work (do you need to have it up on a server to work? I am just testing it local at the moment)
EDIT: Works now, I don't know what I did but it works.
there are few things you need to add ADD LAT, ADD LONG and ADD YOUR ADDRESS HERE
<div id="map-canvas" style="height:300px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script></script>
<script>
jQuery(document).ready(function($){
codeAddress();
});
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(ADD LAT, ADD LONG);
var mapOptions = {
zoom: 14,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
geocoder.geocode( { 'address': 'ADD YOUR ADDRESS HERE'}, 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());
</script>
If you just want to create a map to show where is your business as most the websites the answer is much simpler.
1 - Go to Google maps website and search for the address you want to add.
2 - Once you find the address in the button right of the screen click in settings
3 - Select share a embedded map.
4 - Select the size of the map and you will get something like this on the bar in the side
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3192.61190945592!2d174.74475940000002!3d-36.85176959999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d0d4793eebb1d67%3A0x6830f22a202256c9!2sPonsonby+Rd!5e0!3m2!1sen!2snz!4v1393896861642" width="400" height="300" frameborder="0" style="border:0"></iframe>
Put into your website and job done :)
I am work in ZK and now I am need use the Google API maps. I have used this API in other framework sometimes.
I don't show the maps.
Firstly I thought the problem may be the css, but it isn't.
I added a initialize (maps) function to a event onLoad of windows but I had still the same problem. I debug the code in the browser with the js console and I seen that the window event load isn't available so I called the function initialize from the event load from the div (which contents the maps), again the js console showed the same message.
I use a directive
<div id="map_canvas" style="width: 320px; height: 480px;" xmlns:w="http://www.zkoss.org/2005/zk/client" w:onClick="initialize()"></div>
But the div wasn't shown.
Finally I used a pure html element, using the html tag of ZK:
<html><![CDATA[
<div id="map_canvas" onload="initialize()" style="width: 320px; height: 480px;"/>
]]></html>
but the result in the js console is again
<div class="noscript"><p>Sorry, JavaScript must be enabled.<br/>Change your browser options, then try again.</p></div>
I'd like know way the function which shows the maps don't do it. I think the problem is the js but I am not sure, do anybody tell me if the problem is the js called please?
Thanks.
Edit:
I have used this way to do it (Thank you very much to Sean Connolly: How get the zk element id from js)
<zk>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">
</script>
<script type="text/javascript">
var map;
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(zk.Widget.$(jq('$map_canvas2')).$n(), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas2" style="width: 1320px; height: 1480px;" />
I think you want something like this:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
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,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
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
});
alert(results[0].geometry.location.latlng[0]);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize();
</script>
<div id="map_canvas" style="width: 320px; height: 480px;" onClick="initialize()"></div>
I am fairly new to the concept of using Google maps in my website.I have gotten this script to load a particular location in a div in my webpage. However, the desired location does not load into my page.
Say, I want to load the location BIT Main Bldg Patna, Bihar, India 12 m E in the div whenever we open the page. However, the result is not exact and we need to zoom in few more layers.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Geocoding Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
var address = 'BIT Main Bldg Patna, Bihar, India 12 m E';
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 8
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
map.setCenter(results[0].geometry.location);
}
else {
// Google couldn't geocode this request. Handle appropriately.
}
});
</script>
</body>
</html>
You may see the exact desired result by inputting BIT Main Bldg Patna, Bihar, India 12 m E in the output text box in this page. What's the mistake here ?
To make your page display a map like the one on the page you linked to, you need to alter the options you're supplying in your map constructor. Change the zoom attribute to 15 or 16 and mapTypeId to google.maps.MapTypeId.ROADMAP, and your map will look more like what you had in mind.
try the following :
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 15
});
I would reorganize your markup. The script should either be in the head section or after the </body> tag so that your function executes after all the elements are properly loaded in the browser DOM.
Create a function like
<script type="text/javascript">
function initialise()
{
var address = 'BIT Main Bldg Patna, Bihar, India 12 m E';
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 10 //to get to a desirable zoom level change this value
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
map.setCenter(results[0].geometry.location);
}
else {
// Google couldn't geocode this request. Handle appropriately.
}
});
}
</script>
Then in your <body> tag you should use a onload event to execute the script.
<body onload="initialise()">
I have profile pages for users of my little card game, like this one - where I display their position by looking up their city. My current jQuery code is here:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// the city name is inserted here by the PHP script
findCity('New-York');
});
function createMap(center) {
var opts = {
zoom: 9,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map(document.getElementById("map"), opts);
}
function findCity(city) {
var gc = new google.maps.Geocoder();
gc.geocode( { "address": city}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var pos = results[0].geometry.location;
var map = createMap(pos);
var marker = new google.maps.Marker({
map: map,
title: city,
position: pos
});
}
});
}
</script>
......
<div id="map"></div>
and it works well, but I only get a simple red marker with a dot displayed:
Is there please a way to display the user avatar instead of the simple marker?
I have URLs for user pictures in my database (together with names, cities, etc.)
They are mostly big images (bigger than 200x300).
The Google maps API does support custom icons, and it's explained in their documentation here.
An example can be found here