I am trying to generate a Google map for my events in Sitefinity. I am using an embedded Google iframe code and I am using <%# Eval("Street") %> and <%# Eval("City") %> and <%# Eval("State") %> to pull the location of my events from my Sitefinity events custom fields to output html.
So my code looks like this:
<iframe width='500' height='240' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=<%# Eval("Street") %>+<%# Eval("City") %>+<%# Eval("State") %>&aq=0&oq=<%# Eval("Street") %>+<%# Eval("City") %>+<%# Eval("State") %>&ie=UTF8&hq=&hnear=<%# Eval("Street") %>+<%# Eval("City") %>+<%# Eval("State") %>&z=14&output=embed&iwloc=near'></iframe>
Now the map is getting generate for the events and everything is working fine except the marker on the map is not getting centered. What should I do to make the marker centered?
Below is a sample HTML with three maps. Make sure that the arguments from Sitefinity are returning what you expect by inspecting the HTML in Developer Tools. Also make sure that there are spaces or commas between Address, City and state. Also if you are using Sitefinity 6 they have Google Maps built in now.
<html>
<head></head>
<body>
<iframe width='500' height='240' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=510 W Main St Fort Wayne IN&aq=0&oq=510 W Main St Fort Wayne IN&ie=UTF8&hq=&hnear=510 W Main St Fort Wayne IN&z=14&output=embed&iwloc=near'></iframe>
<iframe width='500' height='240' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1770 Apple Glen Blvd Fort Wayne IN&aq=0&oq=1770 Apple Glen Blvd Fort Wayne IN&ie=UTF8&hq=&hnear=1770 Apple Glen Blvd Fort Wayne IN&z=14&output=embed&iwloc=near'></iframe>
<iframe width='500' height='240' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1600 Amphitheatre Pkwy, Mountain View, CA&aq=0&oq=1600 Amphitheatre Pkwy, Mountain View, CA&ie=UTF8&hq=&hnear=1600 Amphitheatre Pkwy, Mountain View, CA&z=14&output=embed&iwloc=near'></iframe>
</body>
</html>
Using the Google Maps V3 API. Paste the javascript & map div inside the widget in sitefiniy, use your <%#Eval("address")%> as the string being passed to the GetLatLong() function
<html html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEYHERE&sensor=false"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
var geocoder = new google.maps.Geocoder();
var marker;
var map;
$(document).ready(function(){
initialize();
});
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(39.8282, -98.5795),//US Center as Default
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
GetLatLong("201 W Main St Fort Wayne IN");//Use your <%#Eval("Address")%> here Like
//GetLatLong('<%#Eval("Street")%> <%#Eval("City")%> <%#Eval("State")%> ');
}
function GetLatLong(address){
if (geocoder)
{
geocoder.geocode({ 'address': address }, function (results,status) {
if (status == google.maps.GeocoderStatus.OK)
{
var l = results[0].geometry.location;
map.setCenter(l);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: address
});
}
else
{
}
});
}
}
</script>
</head>
<body>
<div id="map-canvas" style="height:500px;width:500px;"></div>
</body>
</html>
Related
Why I can't set zoom level, I tried using &z=5 to write on the end of link, buy not working. Here is demo
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2830.0493437376044!2d20.460033515820356!3d44.8205593841789!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x475a7ab4f7ba19a5%3A0xf3cb8c583ee409d6!2sGagarin+Film!5e0!3m2!1sen!2sba!4v1472463205637&z=5" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
http://jsfiddle.net/e9fdgfpn/154/
If your embed code is coming from maps.google.com, the "pb" URL parameter contains every map setting in one long string, including the zoom level.
Each value in this parameter is separated by an exclamation mark, and begins with a 2-letter code. The first three values begin with "1m". The fourth value, beginning with "1d", is the zoom level. Change the value between "1d" and the exclamation mark to adjust the zoom level.
A value of around 1000 displays an area about the size of a city block, and a value above 400,000 will encompass the globe.
Use this code
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
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>
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