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>
Related
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>
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>
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);
}
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
<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