I am working with the jQuery mobile google maps example here, focusing on the first "Basic Map Example".
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html
I want to be able to dynamically add markers to the basic_map, but I am having some trouble. I'm new to jQuery mobile and JavaScript.
Here is my edited version of the basic-map example from the jQuery mobile UI website. If you save it in the jQuery mobile demos folder, then everything should render properly. I have added a button at the bottom of the map page and also the addMarkers function. When you load the page, the map shows up centered at the mobileDemo coordinates (-41, 87), which is close to chicago, but not quite there. When you click on the button, I want to update the map with another marker at the chicago point, but the screen goes blank.
This is just a mock example of what I really want to do. In my longer, more complicated program, I'm querying a database to find addresses that match the query, then I want to put those markers up on the map dynamically. What do I need to change about this source code to be able to plot the Chicago point (or other markers on the fly)?
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link type="text/css" rel="stylesheet" href="css/jquery-mobile-1.0/jquery.mobile.css" />
<link type="text/css" rel="stylesheet" href="css/mobile.css" />
<script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-mobile-1.0/jquery.mobile.min.js"></script>
<script type="text/javascript" src="js/jquery.ui-1.8.15/jquery.ui.autocomplete.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '41,-87', 'zoom': 7 };
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
var map
function addMarkers(){
map = new google.maps.Map(document.getElementById('map_canvas'));
var marker = new google.maps.Marker({
map: map,
position: chicago
});
}
$('#basic_map').live('pageinit', function() {
demo.add('basic_map', function() {
$('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
}).load('basic_map');
});
$('#basic_map').live('pageshow', function() {
demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
});
</script>
</head>
<body>
<div id="basic_map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
<div data-role="content">
Add Some More Markers
</div>
</div>
</body>
</html>
Please check the below example.
In the first map load there isn't any marker. When you click the button then a marker is dynamically added without a need for page or map refresh.
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
<script type="text/javascript">
var chicago = new google.maps.LatLng(41.850033,-87.6500523),
mobileDemo = { 'center': '41,-87', 'zoom': 7 };
function initialize() {
$('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
}
$(document).on("pageinit", "#basic-map", function() {
initialize();
});
$(document).on('click', '.add-markers', function(e) {
e.preventDefault();
$('#map_canvas').gmap('addMarker', { 'position': chicago } );
});
</script>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
Add Some More Markers
</div>
</div>
</body>
</html>
The initial map:
The map after the button's click:
Related
I am trying to get on my website the gmaps with few markers but i am getting the grey screen or partially grey screen.Before, I used google maps API the same way and everythings works fine. If you can help me I would be grateful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zadanie 7</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY"></script>
</head>
<body>
<div class="container-fluid" id="map" style="height: 500px;">
</div>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Zadanie 6 Martin Kranec</h4>
<ul class="nav nav-pills nav-stacked">
<li>Prvá Stránka</li>
<li>Druhá Stránka</li>
<li class="active">Tretia Stránka</li>
</ul><br>
</div>
<div class="container-fluid">
<div class='container-fluid'><div class='table-responsive'><table class='table'><thead><tr><th>Vlajka</th><th>Štát</th><th>Počet Navštevníkov</th></tr></thead><tbody><tr><td>World</td><td>World</td><td>2</td></tr><tr><td><img class='flag' src='http://www.geonames.org/flags/x/sk.gif'></td><td><a href='countrystatistics.php?countrycode=sk'>Slovensko</a></td><td>2</td></tr></tbody></table></div></div> </div>
</div>
</div>
<footer class="container-fluid">
<p>©Martin Kranec Webové technológie</p>
</footer>
<script type='text/javascript'>
var lat=[];
var lon=[];
lat.push(48.15);
lon.push(17.1167);
lat.push(48.1704);
lon.push(17.4209);
</script>
<script>
function initMap() {
//alert(lat[1]);
var mapProp = {
center: new google.maps.LatLng(89, -25),
zoom: 4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var count = lat.length;
for (var i = 0; i < count; i++) {
var myLatLng = {lat: lat[i], lng: lon[i]};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: ''
});
}
}
initMap();
//initMap();
</script>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=initMap"></script>-->
</body>
</html>
and here is my website where I work on this project http://147.175.98.165/zadanie7/thirdpage.php
Google maps has a lot of race conditions. I use this code a lot to display them instead. This code should be in a ready event like jquery ready.
new Promise(function (resolve, reject) {
if (!document.getElementById('google-maps')) {
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
var link = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=mapsFinishedLoading";
fileref.setAttribute("async", "async");
fileref.setAttribute("defer", "defer");
fileref.setAttribute("src", link);
fileref.setAttribute("id", 'google-maps');
window.mapsFinishedLoading = resolve;
document.getElementsByTagName("body")[0].appendChild(fileref);
} else {
resolve();
}
}).then(function (result) {
//Your map should be available now
mapOptions={};//put your options here
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
});
Make sure your map div is visible before calling
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
I'm trying to use the Google Maps API to get a single map to show. I'm using Javascript.
It should be a single page with one header and one map below the header. I signed up for the Google Maps API recently, so I'm not sure if it takes a certain amount of time for the API key to be active or not. I've got other CSS files and a googlemaps.js file that doesn't have anything in it yet.
Here's my code. Any ideas why it's not working?
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, intial-scale=1.0;'>
<title>API(s)</title>
<link rel='stylesheet' href='styles/semantic.min.css'>
<link rel='stylesheet' href='styles/main.css'>
</head>
<body>
<div class="ui two column centered stackable grid container">
<div class="column">
<h1 class="goog-header">Location Based Image Search</h1>
</div>
</div>
<div class="ui one column stackable grid container js-images-container">
<div class="column">
<div id="map"></div>
</div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXTmorapOu1WquB3VlsLrckhE45Bgfrfw&callback=initMap" async defer></script>
<script src='javascript/googlemaps.js'></script>
</body>
</html>
Try to change your map DIV to:
<div id="map" style="width:800px;height:600px"></div>
I am using Intel XDK to try and get the google maps displayed on the screen at the location set in Intel XDK. However, I am having issues with actually displaying the map on the screen, after spending many hours researching trying to figure out why it isn't working I have hit a brick wall and I have no idea how to proceed from here.
So any help will be greatly appreciated to point me in the right direction, thanks in advance.
Index.html class
<!DOCTYPE html>
<html>
<!--
* Please see the included README.md file for license terms and conditions.
-->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->
<style>
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 src="lib/mc/hammer.js"></script> -->
<!-- <script src="lib/ft/fastclick.js"></script> -->
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>-->
<script src="https://maps.googleapis.com/maps/api/js?key=MyApiKey&callback=initMap"></script>
<script src="js/app.js"></script>
<script src="js/Maps.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="sidebar/js/hammer.js"></script>
<script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
<script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
<script type="application/javascript" src="sidebar/js/sidebar.js"></script>
<script type="application/javascript" src="xdk/ad/jqm_subpage.js"></script>
</head>
<body id="afui" class="v2" onload="navigator.geolocation.getCurrentPosition(onSuccess, onError)">
<!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
<!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
<!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->
<div class="upage vertical-col left" id="mainpage" data-role="page"><a class="widget uib_w_2 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="maps" href="#Maps" data-transition="fade">Maps</a>
<a class="widget uib_w_3 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="gps">GPS</a>
</div>
<div class="upage" id="Maps" data-role="page" >
<div class="upage-outer" >
<div class="upage-content ac0 content-area vertical-col left" id="page_70_37"><a class="widget uib_w_4 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button">Button</a>
<div id="map" style="height: 500px; width: 300px; margin: 0; padding: 0;">
</div>
<div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_6" data-uib="jquery_mobile/footer" data-ver="0">
<h1>footer</h1>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"></div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
</div>
<div class="outer-element uib_w_5 uib_crossbar botbar fixed bar-bg thumb-bg bar-gutter" data-uib="layout/bottom_crossbar" data-ver="1" data-anim="{'style':'overlap', 'v':400, 'side':'bottom', 'dur':500}">
<div class="sidebar-content content-area vertical-col">
</div>
</div>
</div>
</body>
</html>
App.js
var latitude;
var longitude;
var onSuccess = function(position) {
alert(
latitude = position.coords.latitude;
longitude = position.coords.longitude;
};
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
var locationOptions = {
maximumAge: 10000,
timeout: 6000,
enableHighAccuracy: true
};
Maps.js
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 16,
center: new google.maps.LatLng(latitude,longitude)//{latitude, longitude}
});
//var marker = new google.maps.marker({position: LatLng, map:map});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
/* // stops the text directions when un commented
var control = document.getElementById('floating-panel');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
*/
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var start = new google.maps.LatLng(latitude,longitude)//{latitude, longitude};
var end = '10 Downing Street, Downing Street, London';
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
Index_User_Scripts
/*jshint browser:true */
/*global $ */(function()
{
"use strict";
/*
hook up event handlers
*/
function register_event_handlers()
{
/* button Button */
$(document).on("click", ".uib_w_1", function(evt)
{
/* your code goes here */
});
/* button #maps */
$(document).on("click", "#maps", function(evt)
{
/*global activate_page */
activate_page("#Maps");
initMap();
//calculateAndDisplayRoute();
});
/* button #gps */
$(document).on("click", "#gps", function(evt)
{
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
}
document.addEventListener("app.Ready", register_event_handlers, false);
})();
You need to have permission to use Google API. I used the Google Maps widget and tried with two locations, Statue of Liberty and Taj Mahal. I was able to make it work in emulator as well as on the Intel XDK Preview apps on my phones. Details are in this post:
http://hodentekmobile.blogspot.com/2016/07/intel-xdk-controls-6-using-google-map.html
Here are the settings I used for the widget:
Javascript rookie warning
I'm utilizing this demo on a new project: http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map
All is working well, except i need to make a functionality adjustment.
Currently, the app accesses Geolocation right away as the page loads.
I need to find a way to change that, so the geolocation function triggers when clicking a link that I'll have say "Use my current location"
I've tried quite a few times, but I admit my rookie javascript syntax is problem.
I'll paste a clean local-ready version of the map (just need to link modernizer).
If anyone can help me trigger the geolocation function via a link, instead of automatically on pageload, you'd be a lifesaver.
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link type="text/css" rel="stylesheet" href="http://jquery-ui-map.googlecode.com/svn/trunk/demos/css/jquery-mobile-1.0/jquery.mobile.css" />
<link rel="stylesheet" href="http://jquery-ui-map.googlecode.com/svn/trunk/demos/css/mobile.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="../js/modernizr.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '40.74843,-73.98566', 'zoom': 18 };
////////////////////////////////////////////////////////////
$('#directions_map').live('pageinit', function() {
demo.add('directions_map', function() {
$('#map_canvas_1').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
self.set('getCurrentPosition', function() {
self.refresh();
self.getCurrentPosition( function(position, status) {
if ( status === 'OK' ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
self.get('map').panTo(latlng);
self.search({ 'location': latlng }, function(results, status) {
if ( status === 'OK' ) {
$('#from').val(results[0].formatted_address);
}
});
} else {
alert('Unable to get current position');
}
});
});
$('#submit').click(function() {
self.displayDirections({ 'origin': $('#from').val(), 'destination': $('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(response, status) {
( status === 'OK' ) ? $('#results').show() : $('#results').hide();
});
return false;
});
}});
}).load('directions_map');
});
$('#directions_map').live('pageshow', function() {
demo.add('directions_map', $('#map_canvas_1').gmap('get', 'getCurrentPosition')).load('directions_map');
});
</script>
</head>
<body>
<div id="directions_map" data-role="page"><div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas_1" style="height:300px;"></div>
<p>
<label for="from">From</label>
<input id="from" class="ui-bar-c" type="text" value="" />
</p>
<p>
<label for="to">To</label>
<input id="to" class="ui-bar-c" type="text" value="350 5th Ave, New York, NY 10118" />
</p>
<a id="submit" href="#" data-role="button" data-icon="search">Get directions</a>
</div>
<div id="results" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" style="display:none;">
<div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">Results</div>
<div id="directions"></div>
<div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-bottom ui-btn-up-undefined"></div>
</div>
</div></div>
</body>
</html>
I am trying to add google maps for my form, so after they enter the address they can view map and after that maps latitude and longitude submitted to the database. So far I couldn't implement it. I tried it on jsfiddle and it worked. But when i try to add to the page it not working.
http://jsfiddle.net/pborreli/pJgyu/
Here is the full page.
<!DOCTYPE html>
<htmllang-"en">
<head>
<meta charset="utf-8">
<title>My First Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<!--<link href="css/docs.css" rel="stylesheet">-->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$("#address").change(function() {
var geocoder = new google.maps.Geocoder();
var add = $("#address").val();
geocoder.geocode( { 'address': add}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
};
});
</script>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">My First Guide</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Write a review</li>
<li>Talk</li>
<li>Events</li>
<li>
<form class="navbar-search pull-left">
<!--You can put class="search-query" too.-->
<input type="text" class=".navbar-search" placeholder="Search">
</form>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- div container -->
</div><!-- div navbar-inner -->
</div><!-- navbar navbar-fixed-top -->
<div class="container">
<form class="form-horizontal">
<fieldset>
<legend>Submit Business Place</legend>
<div class="control-group">
<label class="control-label" for="input01">Business Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Please specify the name of business.(May
be it is a brand name)</p><br />
</div>
<div class="control-group">
<label class="control-label" for="input01">Address</label>
<div class="controls">
<input type="text" class="input-xlarge" id="ad">
<p class="help-block">To use lines please specify
‹br/› tag.</p><br/>
<div id="map"></div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Description</label>
<div class="controls">
<textarea class="input-xlarge" id="textarea" rows="10"></textarea>
</div>
</div>
<label class="control-label" for="input01">Categories</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Use comma as a separator.</p><br />
</div>
</fieldset>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
</body>
</html>
But here is javascript stuff.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
$("#address").change(function() {
var geocoder = new google.maps.Geocoder();
var add = $("#address").val();
geocoder.geocode( { 'address': add}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
};
});
</script>
And here is the div where i add my map.
<div class="control-group">
<label class="control-label" for="input01">Address</label>
<div class="controls">
<input type="text" class="input-xlarge" id="ad">
<p class="help-block">To use lines please specify
‹br/› tag.</p><br/>
<div id="map"></div>
</div>
I've done a quick scan of your code and there seem to be some basic coding problems:
You appear to create your map in an intialize function, but your initialize function appears to be embedded within the larger .change() callback function; I do not see how your map is ever going to be displayed.
Your JavaScript code is focused on a jQuery search for an element with the id: address, but there does not appear to be an element with that id in your markup.
The label you define that contains the text Address says that it is a label for: input01, but you have 2 distinct elements in your markup that have been assigned the id: input01.
There are multiple labels that have been marked as being the label for: input01.
All of the script tags you have defined at the bottom of your file are missing the type attribute.
I think you have too many basic coding errors and it looks like you may have possibly garbled the code during the process of submitting it for review? It's hard to tell, but I hope my feedback is helpful and will help you to get closer to your goal.