I'm using the site http://www.houston.ind.br/api/map/map1/rota.htm as an sample to develop something similar. Things go ok when I run the thing from my local file system using firefox but when I upload the page (either mine or the one referenced above) to a server it no longer works. I tried substituting a google key I had obtained for use with the google api but that makes no difference.
I looked through the enabled APIs for my key and turned almost everything on to no avail.
Any idea what's going on? Do I need some other type google key?
I was able to make it work by changing http to https on the following line
<script src=" https://maps.google.com/?file=api&v=2.x&key=ABQIAAAAA9cb-iZ2XyrDiJe40QcIixSYNaUY3kVpdSwiLlIjooxsqEAfDxQTzxBRZuWS5Ya5YKFT2LGaMMA-IQ"
type="text/javascript"></script>
<div style='overflow:hidden;height:292px;width:1286px;margin-left:0.7cm; padding:5px 5px 5px 5px; '>
<div id='gmap_canvas' style='height:292px;width:1286px;'></div>
<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
</div>
<a href='https://embedmaps.org/'>Baal vattika</a>
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=a3c2ec770a2f881655fbdd614aa3d259bdbd1e89'>
</script>
<script type='text/javascript'>
function init_map(){
var myOptions = {zoom:12,center:new google.maps.LatLng(13.0649666,80.22328349999998),mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(13.0649666,80.22328349999998)});
infowindow = new google.maps.InfoWindow({content:'<strong>Baal vattika</strong><br>51B, 2nd St, Gill Nagar, Choolaimedu, Chennai, Tamil Nadu 600094<br>600094 chennai<br>'});
google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});
infowindow.open(map,marker);}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
Related
My goal is to takes real-world map/streets and create custom roads, apply a way to navigate through my own roads along with existing streets in the world
After creating a new street, i exported the osm file, brought it to Maperitive to generate the tiles. i then make use of leaflet routing machine to do navigation through my new street in HTML. However, it seems to completely ignore what i have added. I am new into these software and cant seem to find what did i do wrong
Download from OSM into JOSM, created new street.
Exported as OSM, opened in Maperitive.
Export into Tiles, use Leaflet & Leaflet routing machine to try and route within the new street.
<link rel="stylesheet" href="Map Navigation/leaflet.css" />
<link rel="stylesheet" href="Map Navigation/leaflet-routing-machine-3.2.12/dist/leaflet-routing-machine.css" />
<script src="Map Navigation/leaflet.js"></script>
</head>
<body>
<div style="width: 1200px; height: 800px" id="map"></div>
<script type="text/javascript" src="Map Navigation/leaflet-src.js"></script>
<script src="Map Navigation/leaflet-routing-machine-3.2.12/dist/leaflet-routing-machine.js"></script>
<script>
var mymap = L.map('map').setView([1.269506, 103.832759], 13);
L.tileLayer('Map Navigation/Tiles/{z}/{x}/{y}.png', {maxZoom: 16}).addTo(mymap);
L.Routing.control({ waypoints:[
L.latLng(1.269506, 103.832759),
L.latLng(1.269542, 103.835772)],
routeWhileDragging: true
}).addTo(mymap);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
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 doing a google map with custom symbols on locations provided by the client. Pasted below is a simplified version. When I set the path to the marker graphic .png in my own hard drive, and view the map in my own browser, everything works fine: The custom markers appear in the correct locations.
However, when I set the path to the marker .png in Dropbox, the marker does not appear on the map- neither with nor without the "?dl=0" suffix that Dropbox adds to the filename. I've also tried keeping the graphic on my Google Drive and pulling it from there; That didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>GoogleMapHawthorne It Works!</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 950px; height: 525px;"></div>
<script type="text/javascript">
// locationsSC = locations in Service, Community Asset layer
var locationsSC = [
['Fish Emergency Services', 45.512388, -122.651950],
['Southeast Community Bike Fix-it Station', 45.512360, -122.634061],
['Southeast Kitchen Share', 45.508305, -122.637014],
['Southeast Tool Library', 45.508312, -122.637690],
['Southeast Uplift Neighborhood Coalition', 45.513445, -122.627480]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(45.510000, -122.630930),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
// adding Service, Community Asset markers
var markerSC, sc;
for (sc = 0; sc < locationsSC.length; sc++) {
markerSC = new google.maps.Marker({
position: new google.maps.LatLng(locationsSC[sc][1], locationsSC[sc][2]),
map: map,
icon: {
url: 'https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png',
scaledSize: new google.maps.Size(25, 25)
}
});
google.maps.event.addListener(markerSC, 'click', (function(markerSC, sc) {
return function() {
infowindow.setContent(locationsSC[sc][0]);
infowindow.open(map, markerSC);
}
})(markerSC, sc));
}
</script>
</body>
</html>
Is the problem in my code? Or is it Dropbox?
I'm just beginning to learn JavaAcript; Most of the code is snippets copied (by typing) from various tutorials.
I have no qualms about pasting the actual file path in the code here. That file location is going to be public anyway. If anyone can think of a good reason I shouldn't do this, feel free to say so- and why.
Above all, thanks in advance.
https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png isn't a link to an image. It's a link to a web page that (among other things) shows you the image.
To get a link to the image itself, try https://www.dropbox.com/s/set461kj7rt1zv5/ServiceBrownCog.png?raw=1. For more details, see https://www.dropbox.com/help/201.
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>
Is there a way to insert an address into a link and have it bring up the street view?
For instance:
<img src="http://maps.google.com/?q=ADDRESSHERE&view=streetview" />
Street View now has a static images API. Here's an example:
http://maps.googleapis.com/maps/api/streetview?size=640x480&location=43.0635309,141.3253261&fov=120&heading=235&pitch=10&sensor=false
Here's the docs:
https://code.google.com/apis/maps/documentation/streetview/
2011:
2017:
Might be best to use Google Maps JavaScript API v3 to do it. See documentation and sample code at http://code.google.com/apis/maps/documentation/javascript/services.html#StreetView.
Here's code from that page (with a few extraneous bits removed) that displays a street view:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API Example: Embedded StreetView</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var bryantPark = new google.maps.LatLng(37.869260, -122.254811);
var panoramaOptions = {
position:bryantPark,
pov: {
heading: 165,
pitch:0,
zoom:1
}
};
var myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
myPano.setVisible(true);
}
</script>
</head>
<body onload="initialize()">
<div id="pano" style="width: 425px; height: 240px"></div>
</body>
</html>
Note that the code uses latitude and longitude rather than address. If all you have is a street address, you can use Google's Geocoder object to convert an address to a LatLng object.
You can embed whole the Street View on your page. Use googlemaps GStreetviewPanorama object for that. You can look at the example here:
http://gmaps-samples.googlecode.com/svn/trunk/streetview/streetview_lazy.html