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>
Related
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 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>
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.
I am using the MapBox JavaScript API and trying to display some maps on a tab widget. Everything is working fine, except for the fact that when the page first loads, the maps do not load. As soon as I interact with the map in some way like zoom in/out or drag, this causes all of the map tiles to load.
<div class="g12" id="mapbox" style="display:none">
<div class="widget" id="widget_tabs" style="min-height:400px;">
<h3 class="handle">http://www.mapbox.com/mapbox.js/example/v1.0.0/</h3>
<div class="tab">
<ul>
<li>MapBox 1</li>
<li>MapBox 2</li>
<li>MapBox 3</li>
</ul>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<style>
#map1 #map2 #map3 { position:absolute; }
#content {position: relative;}
</style>
<script>
$(document).ready(function() {
mapbox.auto('map1', 'examples.map-zr0njcqy');
mapbox.auto('map2', 'examples.map-zr0njcqy');
mapbox.auto('map3', 'examples.map-zr0njcqy');
$('#content').css({ height: 700});
var x = $('#mapbox'); /* cache the selector */
$('#map1,#map2,#map3').css({ width: x.width() * .98 });
$('#map1,#map2,#map3').css({ height: x.height() * .75});
});
</script>
<div id="map-1">
<div id='map1'></div>
</div>
<div id="map-2">
<div id='map2'></div>
</div>
<div id="map-3">
<div id='map3'></div>
</div>
</div> <!--end of class=tab-->
</div> <!--end of widget_tabs-->
How can I modify this code so that the it forces the maps to load correctly after the page loads? Thanks.
OpenLayers and MapBox OpenLayers.org is an open source JavaScript web mapping library distinguished from other alternatives, like Leaflet or Google Maps APIs, because of its huge set of components.
I spent the weekend creating sample apps by integrating OpenLayers with API's such as MapBox, WebGL etc... After all was said and done, I was extremely impressed with OpenLayers - and I plan to make use of OpenLayers in an upcoming POC/Project.
Here is a link to my test harness. From there you can also download the code for all of the examples, too.and finally...AN ANSWER TO YOUR QUESTION :) Defining an initialization JavaScript function: In my code below, I have defined a JavaScript function called initMap and invoke it by the browser to initialize the map after the page has finished loading.
<script>
function initMap() {
}
</script>
//Modify the body opening tag and add an onload event attribute to it:
<body onload="initMap();"> </body>
// Start - the actual code. See the test harness for working example
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
function initMap(){
var map = new OpenLayers.Map("map");
var earth = new OpenLayers.Layer.XYZ(
"Natural Earth",
["http://a.tiles.mapbox.com/v3/
mapbox.natural-earth-hypso-bathy/${z}/${x}/${y}.png",
"http://b.tiles.mapbox.com/v3/
mapbox.natural-earth-hypso-bathy/${z}/${x}/${y}.png",
"http://c.tiles.mapbox.com/v3/
mapbox.natural-earth-hypso-bathy/${z}/${x}/${y}.png",
"http://d.tiles.mapbox.com/v3/
mapbox.natural-earth-hypso-bathy/${z}/${x}/${y}.png"
],
{
attribution: "Tiles © <a href='http://mapbox.com/'>MapBox</a>",
sphericalMercator: true,
wrapDateLine: true,
numZoomLevels: 19
}
);
map.addLayer(earth);
map.setCenter(new OpenLayers.LonLat(105, 35).transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")), 4);
}
<div>
{$google_map_link}
</div>
I am assigning the following google map iframe codes into smarty and trying to display map on the screen.
google map that assigned to smarty variable {$google_map_link} is
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.in/maps?q=Tiriyos&gl=in&hl=en&sll=13.008237,80.193329&sspn=0.206059,0.363579&ie=UTF8&view=map&cid=5721197682818793762&hq=Tiriyos&hnear=&ll=12.948405,80.137217&spn=0.006441,0.011362&iwloc=A&output=embed"></iframe>
<br />
<small>
View Larger Map
</small>
I expect to display the google map on screen but only iframe codes are displayed
How to solve this...
I've tried your code and it works on Smarty 3.0.8.
Why don't you use Google maps API (http://code.google.com/apis/maps/index.html)?
I usualy put html into the template and just pass the values. Example below:
php:
<?php
$smarty->assign('google_map_x', '12.948405');
$smarty->assign('google_map_y', '80.137217');
?>
template:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng({$google_map_x}, {$google_map_y});
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Tiriyos"
});
}
</script>
<div id="map_canvas" style="width:300px;height:300px"></div>
Then you can put your info window on your marker. Read more here: http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows
In php
<?
$google_map_link = html_entity_decode($google_map_code);
$smarty->assign('google_map_link', $google_map_link);
?>
In HTML
<div>
{$google_map_link}
</div>
I had used html_entity_decode to decode google maps iframe code and displayed in smarty. This is easiest way to display google maps in smarty.
I may help some one else