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.
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>
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.
I have this google map:
<?php
//Conexion db
$query = mysql_query("SELECT * FROM routes");
?>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=es">
</script>
<script type="text/javascript">
window.onload = function () {
var options = {
zoom: 5,
center: new google.maps.LatLng(40.84706, -2.944336),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), options);
<?php
for($i = 0; $i < mysql_num_rows($query); $i++){
$icao = mysql_result($query, $i, 'from');
$query = mysql_query("SELECT * FROM airports WHERE icao='$icao'");
$latitude = mysql_result($query, 0, 'latitude');
$longitude = mysql_result($query, 0, 'longitude');
$city = mysql_result($query, 0, 'city');
?>
var Airport1 = '<h3 align="center" style="font-family:Arial, Helvetica, sans-serif"><?php echo $icao; ?> - <?php echo $city; ?></h3>';
var image = 'http://i46.tinypic.com/33zbm09.png';
var latLonCenter = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
marker = new google.maps.Marker({
position: latLonCenter,
map: map,
draggable: false,
icon: image,
title: '<?php echo $icao; ?> - <?php echo $city; ?>',
Airport1: Airport1
});
var infowindow = new google.maps.InfoWindow({
content: Airport1
});
google.maps.event.addListener(marker, 'click', function () {
var n = 1;
var infowindow = new google.maps.InfoWindow({
content: "",
maxWidth: 320,
zIndex: n
});
infowindow.setContent(this.Airport1);
infowindow.setZIndex(n++); // superpone el último infowindows
infowindow.open(map, this);
});
<?php
$query = mysql_query("SELECT * FROM routes WHERE from='$icao'");
for($i = 0; $i < mysql_num_rows($query); $i++){
$destination = mysql_result($query, $i, 'to');
$query = mysql_query("SELECT * FROM airports WHERE icao='$destiantion'");
$latitudeD = mysql_result($query, 0, 'latitude');
$longitudeD = mysql_result($query, 0, 'longitude');
?>
var PolyLine = new google.maps.Polyline({
strokeColor: "#FF0000",
strokeOpacity: 2.0,
strokeWeight: 2
});
var polyCords = [
new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
new google.maps.LatLng(<?php echo $latitudeD; ?>, <?php echo $longitudeD; ?>)
];
google.maps.event.addListener(marker, 'click', function() {
PolyLine.setPath(polyCords);
PolyLine.setMap(map);
});
<?php } } ?>
}
</script>
</head>
<body>
<center><div id="map_canvas" style="width:850px; height:560px;"></div></center>
</body>
What happens is that it doesn´tshows me the polilyne. The idea is clicking on the marker to open a network of polylines to other marker. The marker is displayed without problems but when clicking on them the polylines don´t appear.
You will have to be using ajax. Clicking on the marker will have to load JSON data for the polyline. Also I noticed that you are loading coordinates via PHP query. I suggest you do this on a separate page where you will output it in JSON format then fetch it via ajax to display them to your map dynamically.
i trying to display many markers on google map.all works fine in too cases
i display ONE marker
i write the GPS localisations of different markers
i have a data base which contains Longitude,latitude values
i want to dispaly those values as markers on my map
here is a try but is not working,plz help me i spend all day already :/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>multi-marqueurs</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<? php
$connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("project",$connexion) or die(mysql_error());
$result = mysql_query("SELECT lattitude,longitude FROM intervenantconn ");
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
if($listeDesPoints!='') $listeDesPoints.=',';
$listeDesPoints.='['.$row['lattitude'].','.$row['longitude'].']';
}
mysql_close($connexion);
?>
<div id="map" style="width: 600px; height: 550px;"></div>
<script type="text/javascript">
var listedespoints=[
<? php echo $listeDesPoints; ?>
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(47.4,1.6),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < liste_des_points.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(liste_des_points[i][1], liste_des_points[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
1) As #mauno-v told you use liste_des_points instead of listedespoints to loop.
2) In your loop you use the secnd and third entry liste_des_points[i][1], liste_des_points[i][2] while you only create two entries.
3) in you click event you use locations[i][0] where locations is not defined.
So create a list with three entries ['location name','latitude','longitude'] or change your indices and variable names.
See below:
<?
error_reporting(E_ALL);
ini_set('error_reporting','on');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>multi-marqueurs</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<?php
/*$connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("project",$connexion) or die(mysql_error());
$result = mysql_query("SELECT lattitude,longitude FROM intervenantconn ");
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
if($listeDesPoints!='') $listeDesPoints.=',';
$listeDesPoints.='['.$row['lattitude'].','.$row['longitude'].']';
}
mysql_close($connexion);*/
$listeDesPoints='[\'Location 1\',47.45,2],[\'Location 2\',47.46,1.6],[\'Location 2\',47.47,1]';
?>
<div id="map" style="width: 600px; height: 550px;"></div>
<script type="text/javascript">
var liste_des_points=[
<?php echo $listeDesPoints; ?>
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(47.4,1.6),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < liste_des_points.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(liste_des_points[i][1], liste_des_points[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(liste_des_points[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
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
});