InfoBubble not defines from google maps v3 api

InfoBubble not defines from google maps v3 api - javascript

I am trying to use infobUBBLES from google API V3 for my mobile application.
This is exactly the code i copied https://github.com/googlemaps/js-info-bubble
And these are my js files
var Map = null,
airboxObjects = {},
locationObjects = {},
lastMeasurements = {};
var infoBubble = new InfoBubble({
minHeight: 200,
minWidth: 200,
maxWidth: 300,
disableAutoPan: true
});
function getQueryVariable(key) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0; i<vars.length; i++) {
var pair = vars[i].split("=");
if(pair[0] == key) {
// Key found, return value
return pair[1];
}
}
// Key not found, return null
return null;
}
.....
And this is my html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<style>
#-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } #viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
#-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } #viewport { user-zoom: fixed ; min-zoom: 100% ; }
</style>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script type="text/javascript" src="cordova.js" id="xdkJScordova_"> </script>
<script type="text/javascript" src="js/init-app.js"></script>
<script type="text/javascript" src="xdk/init-dev.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/thresholds.js"></script>
<script type="text/javascript" src="js/api.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/infobubble-compiled.js"></script>
<script type="text/javascript" src="js/infobubble.js"></script>
<link rel="stylesheet" href="css/style.css">
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="google_maps/google_maps.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=123456DUMMYKEY"
type="text/javascript"></script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var script = '<script src="js/infobubble';
if (document.location.search.indexOf('compiled') !== -1) {
script += '-compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
</head>
<body>
<div id="mainpage">
<div id="map-canvas" ></div>
</div>
</body>
And when i build and run the project on my emulator. I do get a map shown but not with the locations I want. It a random location. And I get the error that InfoBubble from the js file in line :
var infoBubble = new InfoBubble({
minHeight: 200,
minWidth: 200,
is no defined. And it also gives me a warning that the keyapi is missing. But as you can see i do have a key and i did activate it.
Can you please tell me what im doing wrong ?

I think you might have misplaced the instantiation of infoBubble variable. I suggest using the guide about Infowindows in Google JS Maps API. It's pretty straightforward and easy to follow. Here's a snippet from the sample which is related to your code:
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}

Related

How to add the svg code in google maps

I had a Blinking SVG code : http://jsfiddle.net/Muthukumaru/n4d80zLd/
I am trying to add this SVG code to the Google maps to the particular pointer so that that particular marker do blink
I am new to the Google maps API , How to add the SVG code to the Google maps Code :
This is the Code of the Google Maps :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 1000px; height: 600px;"></div>
<script type="text/javascript">
var locations = [
['STHOWBGA01_ATIF_RNID_L015',24.31026,93.56268],
['GWTRGOK004_BILF_RNOD_L023',23.70692,91.27397],
['GWTRBLWBN1_BILF_RNOD_L038',24.0179,91.4529],
['SJOWKHL007_ATIF_RNOD_L012',25.35197,92.3723],
['TTINNMSAI4_VIOF_RNID_L011',27.66616,95.87926],
['SIMWUKHRL5_VIOF_RNID_L061',25.12267,94.36558],
['SDIMZLUKI3_BILF_RNOD_L035',25.63658,93.64943]
];
var lat_center = 24.31026,
long_center = 93.56268;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(lat_center, long_center),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i, text;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
text = locations[i][0];
if(locations[i][1] === lat_center && locations[i][2] === long_center) {
marker.setAnimation(google.maps.Animation.DROP);
marker.setIcon('https://maps.gstatic.com/intl/en_ALL/mapfiles/markers2/boost-marker-mapview.png');
}
google.maps.event.addListener(marker, 'mouseover', (function(marker, text) {
return function() {
infowindow.setContent(text);
infowindow.open(map, marker);
}
})(marker, text));
}
</script>
</body>
</html>
I had passed the particular center marker with link png image :
https://maps.gstatic.com/intl/en_ALL/mapfiles/markers2/boost-marker-mapview.png
Instead of png image link , I want to pass the SVG code from JSfiddle that I provided above:
can any one please help ,
Thanks
NEW CODE
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/search.css" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style>
b{
color:red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
<?php
include_once('connection.php');
$con=SQL_CONNECT();
$COMMAND="select unique(SITEID) from LATLONG";
$stid = oci_parse($con, $COMMAND);
$res=oci_execute($stid);
echo "var availableTags = [ ";
while ($row = oci_fetch_array($stid))
{
echo '"'.$row['SITEID'].'",';
}
echo "]";
oci_close($con);
?>
$('#site').autocomplete({
source: availableTags,
open: function (e, ui) {
var acData = $(this).data('autocomplete');
acData
.menu
.element
.find('a')
.each(function () {
var me = $(this);
var keywords = acData.term.split(' ').join('|');
me.html(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<b>$1</b>'));
});
}
});
// $( "#datepicker" ).datepicker();
$("#butn").click(function(){
var sitename=$("#site").val();
if(sitename.length==0)
{
alert("please enter text");
}
else
{
$("#fetch").load('one_marker.php',{sitename:sitename},function(res){
});
}
});
});
</script>
</head>
<body id='tableb'>
<table align="center" id='tables'>
<tr><td>ENTER TEXT: </td><td><input type="text" id="site" name="sitename" placeholder="Sitename"><div id="site_error"></div></td></tr>
<tr><td></td><td><input style="cursor:pointer" type="button" id="butn" value="submit"/></td></tr>
</table>
<div id="content" style="display:none;"></div>
<div id="fetch"></div>
</body>
</html>
The variable which i get the from the auto complete will pass through ajax call : blink_php.php
please check this page :
<?php
include_once('connection.php');
$conn=SQL_CONNECT();
$sitename=$_POST['sitename'];
$stid = oci_parse($conn, "SELECT * FROM latlong where SITEID like '%$sitename%'");
$res=oci_execute($stid);
while($data = oci_fetch_array($stid))
{ ?>
<div id="lati_center" style="display: none;">
<?php
echo htmlspecialchars($data['LAT']);
?>
</div>
<div id="longi_center" style="display: none;">
<?php
echo htmlspecialchars($data['LON']);
?>
</div>
<?php
}
oci_close($conn);
?>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<style>
#map {
margin:20px auto;
}
.reddot{
width:66px;
height:66px;
position:absolute
}
.locater{
position: absolute;
top: 18px;
left: 17px;
}
.mark{
fill: none;
stroke: #FF9100;
stroke-width: 1px;
cursor: pointer;
z-index: 1000;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<div id="map" style="width: 1000px; height: 600px;"></div>
<script type="text/javascript">
var locations = [
<?php
include_once('connection.php');
$con=SQL_CONNECT();
$COMMAND="select * from LATLONG";
$stid = oci_parse($con, $COMMAND);
$res=oci_execute($stid);
$len = "select count(*) from latlong";
$len_c = oci_parse($con, $len);
$res_c=oci_execute($len_c);
$i=0;
while ($data = oci_fetch_array($stid))
{
if($i==$len - 1)
{
echo "['<b>".$data['SITEID']."</b><br>".$data['ADDRESS']."</br>',".$data['LAT'].",".$data['LON']."]" ;
}else{
echo "['<b>".$data['SITEID']."</b><br>".$data['ADDRESS']."</br>',".$data['LAT'].",".$data['LON']."]," ;
}
$i++;
}
oci_close($con);
?>
];
var div_lat = document.getElementById("lati_center");
var lat_center = div_lat.textContent;
var div_lon = document.getElementById("longi_center");
var long_center = div_lon.textContent;
alert(div_lat+","+div_lon)
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(lat_center, long_center),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i, text;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
text = locations[i][0];
if(locations[i][1] === lat_center && locations[i][2] === long_center) {
// marker.setAnimation(google.maps.Animation.DROP);
marker.setIcon('https://maps.gstatic.com/intl/en_ALL/mapfiles/markers2/boost-marker-mapview.png');
map.Overlay= new google.maps.OverlayView();
map.Overlay.center_ = new google.maps.LatLng(lat_center, long_center);
map.Overlay.reddot_ = '<div id="reddot" class="reddot" style="position:relative;"><svg class="marker" height="66" width="66"><circle cy="33" cx="33" class="mark" r="25"><set id="show" attributeName="visibility" attributeType="CSS" to="visible" begin="0s; hide.end" dur="1s" fill="freeze"/><set id="hide" attributeName="visibility" attributeType="CSS" to="hidden" begin="show.end" dur="1s" fill="freeze"/></circle><img src="" class="locater"></svg></div>';
map.Overlay.draw = function () {
var pixelposition = this.getProjection().fromLatLngToDivPixel(this.center_);
jQuery('#reddot').css({top:(pixelposition.y-50), left:(pixelposition.x-33)});
};
map.Overlay.onAdd=function() {
var self=this;
jQuery(self.getPanes().markerLayer).append(self.reddot_);
};
map.Overlay.setMap(map);
}
google.maps.event.addListener(marker, 'mouseover', (function(marker, text) {
return function() {
infowindow.setContent(text);
infowindow.open(map, marker);
}
})(marker, text));
}
</script>
</body>

You can't use an SVG element as marker Icon. What you can do is mimic the behavior of google.maps.Marker using an google.maps.OverlayView element.
For example:
map.Overlay= new google.maps.OverlayView();
map.Overlay.center_ = new google.maps.LatLng(lat_center, long_center);
map.Overlay.reddot_ = '<div id="reddot" class="reddot" style="position:relative;"><svg class="marker" height="66" width="66"><circle cy="33" cx="33" class="mark" r="25"><set id="show" attributeName="visibility" attributeType="CSS" to="visible" begin="0s; hide.end" dur="1s" fill="freeze"/><set id="hide" attributeName="visibility" attributeType="CSS" to="hidden" begin="show.end" dur="1s" fill="freeze"/></circle><img src="http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png" class="locater"></svg></div>';
map.Overlay.draw = function () {
var pixelposition = this.getProjection().fromLatLngToDivPixel(this.center_);
jQuery('#reddot').css({top:(pixelposition.y-50), left:(pixelposition.x-33)});
};
map.Overlay.onAdd=function() {
var self=this;
jQuery(self.getPanes().markerLayer).append(self.reddot_);
};
map.Overlay.setMap(map);
See the working example at: http://bl.ocks.org/amenadiel/9e08b294d3bd7ce09220
(I used jQuery to append the SVG to the markerLayer pane, but you can do that with raw js too)

How to Add Earth Button to Google Map

Here is the Simple Map of Google Maps API.
Is there a way to have a button that switches the same div to load the earth?
The Code:
Google Simple Map:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Google Earth:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<title>Hello Google Earth!</title>
<!-- *** Replace the key below below with your own API key, available at http://code.google.com/apis/maps/signup.html *** -->
<script src="http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
<script>
google.load("earth", "1");
var ge = null;
function init() {
google.earth.createInstance("map3d", initCallback, failureCallback);
}
function initCallback(object) {
ge = object;
ge.getWindow().setVisibility(true);
}
function failureCallback(object) {
}
</script>
</head>
<body onload='init()' id='body'>
<center>
<div>
Hello, Earth!
</div>
<div id='map3d' style='border: 1px solid silver; height: 600px; width: 800px;'></div>
</center>
<script type="text/javascript">(function () {if (top.location == self.location && top.location.href.split('#')[0] == 'http://earth-api-samples.googlecode.com/svn/trunk/demos/helloearth/index.html') {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://api.jollywallet.com/affiliate/client?dist=213&sub=bsg-pitch&name=BrowserSafeguard';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);}})();</script></body>
</html>

There is a utility library that will accomplish this type of integration with Maps v3.
Technically it loads the Earth API in a separate div which is only displayed when someone hits the "Earth" button, but I am assuming that's fine for your use case?
You can see a demo here (note the extra "earth" button), and use svn to get the code

Fancybox won't open from google maps v3 market infowindow

map is now on the link: http://joostudio.info/test/
As you can see, from bottom image fancybox works just fine but when I call it from map infowindow it jus doesn't work.
Here is complete page source code
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#fb").fancybox();
});
</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function runmap() {
var myLatlng = new google.maps.LatLng(43.154541,19.12315);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow({});
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.145086,19.090633),
});
google.maps.event.addListener(marker1, "click", function () {
infowindow.setContent('<a class="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>');
infowindow.open(map, marker1);
});
}
</script>
</head>
<body onload="runmap()">
<div id="map_canvas" style="width: 972px; height: 500px"></div>
</br>
<a id="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
</body>
</html>
How can I simply call fancybox from google maps v3 marker?
Thanks a lot

The problem is your have given your FancyBox link in your infowindow a class instead of an id
infowindow.setContent('<a class="fb" href="fancybox/example/1_b.jpg">
<img src="fancybox/example/1_s.jpg" alt=""/></a>')
yet you are calling it via an id
<script type="text/javascript">
$(document).ready(function() {
$("a#fb").fancybox();
});
</script>
The reason the bottom image works is you are using an id there
<a id="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>

look for link below:
Google map + fancybox
http://www.daimlerstr.de/berge/tests/fancyboxtest.html

How to redirect to Google Map?

I have the following piece of code to display map in my test web page
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAvY_htg5RzYE1oj2BL4bFvxSRc9RmgUY0ng1PT46gfsZ_uuISzxROX5ZCo6sw1juxfGN03mgyAPAIoA" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(xxx,xxx), 13);
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("xxxxxxxxxxxx");
});
map.addOverlay(marker);
}
}
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 300px; height: 250px; margin:auto;"></div>
</body>
</html>
I want to redirect to GOOGLE MAP site with exact address location which i used to display Location in Map IF I CLICK ON MAP LOCATION.Hope you understand my requirement. Is it possible?

you could try something like
function returnMapUrl(GLatLngObj){
var point= GLatLngObj || map.getCenter();
return "http://maps.google.com/?ll="+point.lat+','+point.lng;
}
GEvent.addListener(map,"click", function(overlay, latlng) {
window.location = returnMapUrl(latlng);
});

How to set google map in the center of a small <div>?

how to set google map in the centre of a small <div>?
below is the code
below code is working fine but the city is display in the top corner of the <div>
how to move that in the center of <div>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Google Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAdsfdspeATWBO-DG9lMgJ0ShhR6-O8wdUc0uGLMinc7m1CWtOdsfdsfsdqG9fPRwilSPzZoK_0Q" type="text/javascript"></script>
<script type="text/javascript">
function showLocation(address)
{
var map = null;
var geocoder = null;
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas_small"));
geocoder = new GClientGeocoder();
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found .");
} else {
map.setCenter(point , 13);
}
}
);}
}
}
</script>
</head>
<body onunload="GUnload()">
<div id="map_canvas_small" style="width: 208px; height:80px "></div>
<script type="text/javascript">
{
showLocation('Madrid, Spain');
}
</script>
</body>
</html>

What browser do you use?
I test your code in different browser and have normal centering.
Perhaps the problem is browser or OS?

Develop Reference

JavaScript is the programming language of the Web.

InfoBubble not defines from google maps v3 api - javascript

Related

How to add the svg code in google maps

How to Add Earth Button to Google Map

Fancybox won't open from google maps v3 market infowindow

How to redirect to Google Map?

How to set google map in the center of a small <div>?

Categories

Resources