I want to provide a feature like user will provide a city,state and country. Then my aim is to mark the location provided by the user on the google maps.
My code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Tue, 08 Jan 2013 05:31:17 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<?php
// get and breakdown the results then store them in $var's
$Address = "99999 parkplace, new york, NY";
$urladdress = urlencode($Address);
$Base_url = "http://maps.google.com/maps/geo?q=";
$urlParts = "&output=xml";
$urlrequest = $Base_url . $urladdress . $urlParts;
$xml = simplexml_load_file($urlrequest);
$num = "0";
$value=$xml->Response->Placemark;
$GeoFindAdd{$num} = $value->address;
$GeoFindCords{$num} = $value->Point->coordinates;
?>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(<?php echo $GeoFindCords{$num}; ?>);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
The output of the code is
http://wfs-01.wapka.mobi/300030/300030787_6850a0ae9a.png
Is there something wrong i am doing? Or any other way to mark the location by providing location.
Thanks.
I got the answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Tue, 08 Jan 2013 05:31:17 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var geocoder, map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(10, 10);
var myOptions = {
zoom: 0,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
codeAddress();
}
function codeAddress() {
var address = "Kottayam, Kerala";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 320px; height: 480px;"></div>
</body>
</html>
Related
I'm using Google Map API to on my website. When I run my web on local host, Google Map work well but when I deploy my web on OpenShift, Google Map doesn't work? I use java web with Tomcat
My index
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<meta charset="utf-8" />
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="GoogleMapAPI.js" type="text/javascript" charset="utf-8"></script>
<title>Untitled 2</title>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
My js file:
function initialize()
{
var myCenter=new google.maps.LatLng(10.771400, 106.685844);
var mapProp =
{
center:myCenter,
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker(
{
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow(
{
content:"NHP Shop <br/> 274/9 Võ Văn Tần P5, Q3"
});
//add sự kiện onclick vào google map marker
/*google.maps.event.addListener(marker, 'click', function()
{
infowindow.open(map,marker);
});*/
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
So please tell me what wrong with my code? Thanks so much
my goal is to be able to load markers from an sql database and display them on a googlemap. but im having a hard time just trying to read markers from an xml file.
Here is my HTML file
<!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&libraries=places"></script>
<script>
function initialize()
{
var mapOptions =
{
zoom: 12,
center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function loadXMLFile(){
var filename = 'markers.xml';
$.ajax({
type: "GET",
url: filename ,
dataType: "xml",
success: parseXML,
error : onXMLLoadFailed
});
function onXMLLoadFailed(){
alert("An Error has occurred.");
}
function parseXML(xml){
container = new nokia.maps.map.Container();
$(xml).find("marker").each(function(){
//Read the name, address, latitude and longitude for each Marker
var nme = $(this).find('name').text();
var address = $(this).find('address').text();
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var markerCoords = new nokia.maps.geo.Coordinate
(parseFloat(lat), parseFloat(lng));
container.objects.add(new nokia.maps.map.StandardMarker(
markerCoords, {text:nme}));
});
map.objects.add(container);
map.zoomTo(container.getBoundingBox(), false);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
and this is my xml file
<?xml version="1.0"?>
<markers>
<marker>
<name>M1</name>
<address>Abbey Street</address>
<lat>53.3496</lat>
<lng>-6.257</lng>
</marker>
</markers>
The map is rendering but no marker is appearing on the map. I have google searched this problem but cant find anything that helps.
you are not calling loadXMLFile()
you aren't including the jquery library
you aren't creating google.maps.Markers (looks like you have syntax from some nokia API instead).
<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
var map = null;
function initialize()
{
var mapOptions =
{
zoom: 12,
center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
loadXMLFile();
}
function loadXMLFile(){
var filename = 'v3_SO_20140124_markers.xml';
$.ajax({
type: "GET",
url: filename ,
dataType: "xml",
success: parseXML,
error : onXMLLoadFailed
});
function onXMLLoadFailed(){
alert("An Error has occurred.");
}
function parseXML(xml){
var bounds = new google.maps.LatLngBounds();
$(xml).find("marker").each(function(){
//Read the name, address, latitude and longitude for each Marker
var nme = $(this).find('name').text();
var address = $(this).find('address').text();
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var markerCoords = new google.maps.LatLng(parseFloat(lat),
parseFloat(lng));
bounds.extend(markerCoords);
var marker = new google.maps.Marker({position: markerCoords, map:map});
});
map.fitBounds(bounds);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
working example
I am creating a wp8 application , and I am using this html code to display 2 pushpins and the directions between them but the problem is that the directions are displayed without the map (on the emulater the html page is all displayed without problem).
There is my Html code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Amex</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var rendererOptions = {
draggable: false
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;
var ksa = new google.maps.LatLng(24.7116667, 46.7241667);
function initialize() {
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: ksa
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.directions);
});
calcRoute();
}
function calcRoute() {
var request = {
origin: new google.maps.LatLng(23.7116667, 45.7241667),
destination: new google.maps.LatLng(20.7116667, 45.7241667),
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.
document.getElementById("total").innerHTML = total + " km";
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:80%"></div>
<div id="directionsPanel" style="width:100%;height 20%;font-family:arial">
<p>Total Distance: <span id="total"></span></p>
</div>
</body>
</div>
</body>
</html>
I have find the solution It is just need to replace this
<div id="map_canvas" style="width:100%; height:80%"></div>
by this
<div id="map_canvas" style="width:300px; height:480px"></div>
Using this solution, I was able to successfully map two locations using this source code below. How do I add a third or fourth location as a waypoint in between the beginning and end locations? I tried to add a second end point but that did not work?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var Center=new google.maps.LatLng(18.210885,-67.140884);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var properties = {
center:Center,
zoom:20,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
map=new google.maps.Map(document.getElementById("map"), properties);
directionsDisplay.setMap(map);
var marker=new google.maps.Marker({
position:Center,
animation:google.maps.Animation.BOUNCE,
});
marker.setMap(map);
Route();
}
function Route() {
var start = new google.maps.LatLng(18.210885,-67.140884);
var end =new google.maps.LatLng(18.211685,-67.141684);
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
} else { alert("couldn't get directions:"+status); }
});
}
google.maps.event.addDomListener(window,'load',initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I think, you would be comfortable to use a Polyline.
Try this variant:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Complex polylines</title>
<link rel="stylesheet" type="text/css" href="https://developers.google.com/maps/documentation/javascript/examples/default.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var poly;
var map;
function initialize() {
var chicago = new google.maps.LatLng(18.210885,-67.140884);
var mapOptions = {
zoom: 20,
center: chicago,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var lineCoordinates = [
new google.maps.LatLng(18.210885,-67.140884),
new google.maps.LatLng(18.211685,-67.141114),
new google.maps.LatLng(18.211685,-67.141684)
];
var polyOptions = {
path: lineCoordinates,
strokeColor: '#dd4b39',
strokeOpacity: 1.0,
strokeWeight: 5
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
for (i = 0; i <= lineCoordinates.length; i++)
{
if (lineCoordinates[i] !== undefined)
{
new google.maps.Marker({
position: lineCoordinates[i],
title: 'some title',
map: map
});
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I want to show a path map and distance between to points by zip code or city name l ike we enter to and from place and map will generate between them , total distance between them will be calculated.
You can do this in three steps
1) generate map by post city or zip code
create map1.php
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example:Post City or Zip</title>
</head>
<body >
<form action="map2.php" method="post" >
Enter 1st zip code / city <input type="text" name="input1" id="input1"><br/>
Enter 2nd zip code / city <input type="text" name="input2" id="input2">
<input type="submit">
</form>
</body>
</html>
2) Create map2.php and generate map
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = '<?php echo $_POST['input1']; ?>';
var end = '<?php echo $_POST['input2']; ?>';
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
</head>
<body onLoad="initialize(),calcRoute()">
<?php
// calculate laglong by address and zip code
function getLatLong($address){
if (!is_string($address))die("All Addresses must be passed as a string");
$_url = sprintf('http://maps.google.com/maps?output=js&q=%s',rawurlencode($address));
$_result = false;
if($_result = file_get_contents($_url)) {
if(strpos($_result,'errortips') > 1 || strpos($_result,'Did you mean:') !== false) return false;
preg_match('!center:\s*{lat:\s*(-?\d+\.\d+),lng:\s*(-?\d+\.\d+)}!U', $_result, $_match);
$_coords['lat'] = $_match[1];
$_coords['long'] = $_match[2];
}
return $_coords;
}
$to = getLatLong($_POST['input1']);echo "<br/>";print_r($to);
$from = getLatLong($_POST['input2']);echo "<br/>";print_r($from);
echo distance($to['lat'], $to['long'], $from['lat'], $from['long'], "m") . " miles";
// // calculate distance by lat long
function distance($lat1, $lon1, $lat2, $lon2, $unit) {
$theta = $lon1 - $lon2;
$dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta));
$dist = acos($dist);
$dist = rad2deg($dist);
$miles = $dist * 60 * 1.1515;
$unit = strtoupper($unit);
if ($unit == "K") {
return ($miles * 1.609344);
} else if ($unit == "N") {
return ($miles * 0.8684);
} else {
return $miles;
}
}
?>
<div id="map_canvas" style="top:30px;"></div>
</body>
</html>
that generate map and getLatLong() function find laglong and distance function find distance between city or zip code
Firstly you have to find geolocation of your zipcode which you can find it easily using gmaps api. Then use "distanceTo" method to find distance between to points (your geopoint and zip code generated geopoint) . distanceTo method gives you distance in meters.
Check this post