I have a code which should take the input of latitude and longitude from the user and display the location of the user. Well, the map is getting displayed, but the marker is not getting displayed. Please help...
<html>
<head>
<title>Map</title>
<script type='text/javascript'
src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDFLaJwxTIGpZmwfpbEyOU5XZglUq6-5iM&sensor=false'>
</script>
<?php
$lat= $_POST['lat'];
$long= $_POST['long'];
?>
<script type='text/javascript'>
var latitude = "<?php echo $lat; ?>";
var longitude ="<?php echo $long; ?>";
function initialize()
{
var myLatLng = new google.maps.LatLng(latitude,longitude);
var mapProp = {
zoom:8,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById('map_canvas'),mapProp);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
optimized: false,
title:'Former About.com Headquarters'
});
}
</script>
</head>
<body onload='initialize()'>
<div id='map_canvas' style='width:300px; height:300px;'></div>
</body>
</html>
Try to change:
position: myLatlng
to:
position: myLatLng
since your variable name is myLatLng not myLatlng
Your marker requires POST data to be constructed, but you don't have a form of any sort.
Related
I want to show Multiple Map Pointers on a Map coming from Custom post type. I can able to get single Map pointer. How can I get Multiple Map Pointers on the map? Here is my code.
<style>
#map_wrapper {
height: 400px;
}
#map_canvas {
width: 100%;
height: 100%;
}
</style>
<?php
$location = get_field('google_map_lat_long');
if (!empty($location)):
?>
<?php /* ?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php */ ?>
<!-- End Content -->
<script>
jQuery(function ($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers''
// $info='';
var markers = [
<?php
echo '["' . $location['address'] . '",' . $location['lat'] . ',' . $location['lng'] . '],';
?>
];
// Info Window Content
var infoWindowContent = [['<div class="info_content"><h3><?php echo $location['address']; ?></h3><p><?php echo $location['address']; ?></p></div>']];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
</script>
<?php
endif;
?>
<?php endwhile; ?>
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
Thanks, :)
Not sure why you are having problems adding multiple markers to a map but you might be able to work out what to do from this example.
<!doctype html>
<html>
<head>
<title>Google maps - multiple markers example</title>
<script type='text/javascript'>
/* data, derived from a db call and written as a json object */
var json={
"results":{
"0":{"name":"Kinnettles","lat":"56.61543329027024","lng":"-2.9266123065796137"},
"1":{"name":"Nathro","lat":"56.793249595719956","lng":"-2.8623101711273193"},
"2":{"name":"Ark Hill","lat":"56.57065514278748","lng":"-3.0511732892761074"},
"3":{"name":"Dodd Hill","lat":"56.54251020079966","lng":"-2.9051538305053555"},
"4":{"name":"Govals","lat":"56.582320876071854","lng":"-2.9509015874633633"},
"5":{"name":"Carsegownie","lat":"56.67951330362271","lng":"-2.8062983350524746"},
"6":{"name":"Frawney","lat":"56.56806620951482","lng":"-2.9501720266113125"},
"7":{"name":"North Tarbrax","lat":"56.57144715546598","lng":"-2.92476614282225"},
"8":{"name":"The Carrach","lat":"56.6938437674986","lng":"-3.131382067657455"},
"9":{"name":"Glaxo","lat":"56.70431711148748","lng":"-2.4660869436035"}
}
};
/* callback function */
function initialise(){
var bounds = new google.maps.LatLngBounds();
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map( document.getElementById('map'), {
zoom:10,
center: { lat: 56.6154, lng: -2.9266 }
});
/* process json data and add a marker for each location */
var data=json.results;
for( var o in data ){
var latlng=new google.maps.LatLng( data[o].lat, data[o].lng );
var title=data[o].name;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
content:title
});
google.maps.event.addListener(marker, 'click', function(event){
infoWindow.setContent( this.content );
infoWindow.open(map, this);
}.bind(marker));
bounds.extend( latlng );
}
map.fitBounds(bounds);
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&callback=initialise' type='text/javascript'></script>
<style type='text/css'>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map{
display:block;
box-sizing:border-box;
width:800px;
height:600px;
margin:1rem auto;
float:none;
border:3px solid black;
}
</style>
</head>
<body>
<div id='map'></div>
</body>
</html>
Hi i have problems to display more than one Google maps on one page
The first map shows correctly but the second doesnt show
I use Smarty to display templates. The results comes from a db. Can anybody check the code and help me to display more than one map
{foreach item=row from=$adress}
<tr>
<td>
<script type="text/javascript">
function initialize() {
var position = new google.maps.LatLng({$row->lat}, {$row->longi});
var myOptions = {
zoom: 12,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas{$row->site_id}"),
myOptions);
var marker = new google.maps.Marker({
position: position,
map: map,
title:"This is the place."
});
var contentString = 'Hello <strong>World</strong>!';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
<div id="map_canvas{$row->site_id}" style="width:300px;height:200px;"></div>
Here is your html code:-
</head>
<body onload="initialize()">
<H1 align="center">Two Google maps side-by-side</h1>
<div id="map_canvas1" style="top: 10px; left: 25px; width:210px; height:220px; float: left"></div>
<div id="map_canvas2" style="top: 10px; left: 75px; width:210px; height:220px"></div>
</body>
</html>
<script>
function initialize()
{
<?php
for($i=1; $i<=2; $i++){
?>
var latlng<?php echo $i ?> = new google.maps.LatLng(18.520266,73.856406);
var myOptions =
{
zoom: 15,
center: latlng<?php echo $i; ?>,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map<?php echo $i; ?> = new google.maps.Map(document.getElementById("map_canvas<?php echo $i ?>"), myOptions);
var myMarker<?php echo $i; ?> = new google.maps.Marker(
{
position: latlng<?php echo $i; ?>,
map: map<?php echo $i; ?>,
title:"Pune"
});
<?php } ?>
}
</script>
I know you are using different programming language to define your code. But the logic i hope you understood.
I am using geolocation to show the current location as follow :
echo '<div style="width:48%;float:left;"><img src="http://maps.google.com/maps/api/staticmap?center='.$lat.','.$long.'&markers=titel:You+are+here|icon:http://tinyurl.com/2ftvtt6|'.$lat.','.$long.'&zoom=17&size=550x450&maptype=roadmap&&sensor=true" width="550" height="450" alt="'.$geodata['formatted_address'].'" \/></div><div style="width:48%;float:right;">';
echo 'Latitude: '.$lat.' Longitude: '.$long.'<br />';
But it is showing a static image on map. I want to show the map in which the user can zoom on map.
How can I use the map such that ?
You can do this like below:
You can use the the iframe for that
I've tried doing the request you need using an iframe to show the result for a latitude, a longitude and zoom needed:
<iframe width="300" height="170" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q='+YOUR_LAT+','+YOUR_LON+'&hl=es;z=14&output=embed"></iframe><br /><small>See map bigger</small>
OR
You can use below code too:
<script type="text/javascript">
var map;
var infowindow;
var marker;
var geocoder = new google.maps.Geocoder();
function initialize(address) {
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(latitude, longitude),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
google.maps.event.trigger(marker, "click");
} else {
alert("Something got wrong " + status);
}
});
}
jQuery(document).ready(function() {
initialize("[your address]");
});
</script>
<div id="map" style="height: 350px; width: 100%;"></div>
The map you are using is only the static image of google map. To show a dynamic map try this code.
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
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>
what this code does is, when a user inputs two cordinates, it setup the map with a two markers and a line to show the direction. Is it possible to change the d*efault marker* to a specific image differently for both cordinate, lets say i want the first cordinate to represent "image1.jpeg" and second cordinate to represent "image2.jpeg".
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Marker Animations</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// var center = new google.maps.LatLng(52.12, -3.2); //center of the map
var center = new google.maps.LatLng(<?php echo $_Mylat?>, <?php echo $_Mylon?>);
var a = [
new google.maps.LatLng(<?php echo $_Mylat?>, <?php echo $_Mylon?>),
new google.maps.LatLng(<?php echo $_Mylat2?>, <?php echo $_Mylon2?>)
];
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: center
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
for (var i=0; i<a.length;i++)
{
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: a[i]
});
}
var flightPlanCoordinates = [
new google.maps.LatLng(<?php echo $_Mylat?>, <?php echo $_Mylon?>),
new google.maps.LatLng(<?php echo $_Mylat2?>, <?php echo $_Mylon2?>)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 400px;">map div</div>
</body>
</html>
where in this code can i change the marker to my specific image, thanks
You'd want to do an IF statement to determine which image the marker should load.
if(i == 0) iconImage = "image1.jpeg";
else if(i == 1) iconImage = "image2.jpeg";
Then simply add the custom icon and variable to the marker:
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: a[i],
icon: iconImage
});
I'm trying to store results in an array from mysql using php, then using the results to call a javascript function to use the results there. I'm not sure why my map isn't showing up (trying to implement google maps into my page)
My php/html/javascript call
<?php
.....
<div id="content"
......
$address=array();
//will list out where to go
while ($sec = mysql_fetch_array($result2)) {
$address[$x++] = ($sec[5] . " " . $sec[7]);
}
print_r($latlng);
print_r($address);
mysql_close($link);
?>
<div id="address_container">
<?php
print array_shift($address);
?>
</div>
</div>
My Javascript code:
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOp$
}
function codeAddress() {
var address = document.getElementByID("address_container").innerHTML;
console.log(address);
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: " + s$
}
});
}
See if this produces the result you are expecting:
PHP:
<?php
// ......
$address = array();
while ($sec = mysql_fetch_array($result2)) $address[++$x]= "$sec[5] $sec[7]";
// this should print the same data as you were getting before if you un-comment it
// print_r($address);
mysql_close($link);
?>
<div id="address_container"><?php print array_shift($address); ?></div>
</div> <!-- I left this here because I don't know what the rest of your HTML looks like... -->
<script type="text/javascript">
document.write(codeAddress());
</script>
Javascript:
function codeAddress() {
var address = document.getElementByID("address_container").innerHTML;
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);
}
});
}
don't print_r $address, but echo it into a js var
</div>
<script type="text/javascript">
var address = <?php echo json_encode($address); ?> ;
document.write(codeAddress());
</script>
then no need to select it in your function
This was what example I was going off from... from the google api
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
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);
}
});
}
<body onload="initialize()">
<div id="map_canvas" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
ref: http://code.google.com/apis/maps/documentation/javascript/services.html#GeocodingAddressTypes