I've been using PHP simple HTML dom parser to parse some data from websites.
Say if there is a web page with a Google map on it and that map has marker on it indicated by a lat and long coordinate, is there a way of retrieving those coordinates from a JavaScript variable?
Here is an example of the JavaScript code I would like to get access to:
<script type="text/javascript">
function GMinitialize() {
var myLatlng = new google.maps.LatLng(11.11, -11.11);
var mapOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({ position: myLatlng, map: map });
} ;
</script>
If it's always going to be exactly the same structure just with different coordinates, as you suggested in your comment above, you could pull the text of the <script> tag with PHP Simple HTML DOM, then parse out the coordinates passed to the LatLng contructor with a regex...perhaps something very simple like:
/var myLatlng = new google\.maps\.LatLng\((.*)\)/
Related
I am using google geocode to convert an address into lat/lng coordinates and then searching my db for other 'articles'(actually store addresses) that are nearby. This is working and my 'locations' foreach loop works fine (If I look at the console I see an array). But when I go to add my markers nothing shows up. I'm not getting any errors with the code below but if I console.log(lat) it shows NaN.
The map shows up and it is centering correctly according to the var 'myLatlng', but no makers are showing. I saw on SO (HERE) that geocode creates a string so you need to parse string to float. But my attempt below is not working.
I'm using laravel 5.
If you want to see how I got my lat/lng coordinates see my answer to me own question HERE.
My template.blade.php page has this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYKEY&signed_in=true&libraries=places"></script>
The page I have the map has the script below these script tags.
Here's the relevant code for the page I have the map on. articles.index.blade.php
#section('footer')
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var myLatlng = new google.maps.LatLng(parseFloat({{ $article->lat }}),parseFloat({{ $article->lng }}));
var map_options = {
center: myLatlng,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
var locations = [
#foreach($articles as $article)
[{{$article->lat}}, {{$article->lng}}]
#endforeach
];
var lat = parseFloat(locations[0]);
var lon = parseFloat(locations[1]);
for (i = 0; i < locations.length; i++) {
var location = new google.maps.LatLng(lat, lon);
var marker = new google.maps.Marker({
position: location,
map: map,
});
}
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
#stop
If I understood properly. You have this 'locations' array. Right? and those are the locations where the markers should appear. But if I'm not wrong, you could have a syntax error in this line:
var locations = [
#foreach($articles as $article)
[{{$article->lat}}, {{$article->lng}}], //YOU NEED A COMMA TO SEPARATE EACH ELEMENT
#endforeach
];
Might be the API is not understanding that weird array with no commas separating each child :P
I want you to try this different logic and see if it works in this part:
//var lat = parseFloat(locations[0]); REMOVE THIS
//var lon = parseFloat(locations[1]); AND THIS
for (i = 0; i < locations.length; i++) {
var location = new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: location,
map: map,
});
}
Leave the type as a String, no need to convert to float.
I need to extract the coordinates from the url and use it to center the map. The following is the code I use now. But when I use this code, the map doesn't load at all.
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?php $_GET['curlat']?> , <?php $_GET['curlng']?>),
zoom: 12,
mapTypeId: 'roadmap'
});
While if I pass the coordinates like the following, it's working perfect
center: new google.maps.LatLng(13.964711, 76.325325),
Evidently, the error is in the above line of code.
What am I doing wrong in extracting the url and passing the value?
Try to echo the output :
ap = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?php echo $_GET['curlat'] .",". $_GET['curlng'];?>),
zoom: 12,
mapTypeId: 'roadmap'
});
Maybe it'll work if you actually print the variable !
<?php echo $_GET['curlat']?>
I have list of coordinates in my database, I want to show that list of property on Google map using API, like this:
red mark are my coordinates/places
how is it possible any idea.
It's very easy, just read data from database, send it to client in json format and plot it in mail
refer following link,
https://developers.google.com/maps/documentation/javascript/markers
sample data
[{'latitude':'59.327383','longitude':'18.06747','title':'test'}....]
following is sample code
var center = new google.maps.LatLng('center latitude','center longitude'); // set center location
var mapOptions = {
zoom: 4,
center: center
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
for(var m in points) {
var myLatlng = new google.maps.LatLng(points[m].latitude,points[m].longitude);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:points[m].title
});
}
I have a kml file with polygon data that is too complex to load onto one googlemap as it contains thousands of latlng coordinates that just wont load all at once.
My question is, is it possible to load just one polygon when a map marker is clicked? I have a mysql database table that holds the latlngs for each marker and the table also has a column for polyCoords. I am looping through the data using php which displays all the markers correctly. Can i then add a listener to the markers which will load the data from the polyCoords column and just show the polygon for that clicked map marker?
<script type="text/javascript">
function initialize()
{
var centre = new google.maps.LatLng(34.233753,-83.828712);
var myOptions =
{
zoom: 4,
center: centre,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?php while ($row = #mysql_fetch_assoc($result))
{?>
var myLatlng = new google.maps.LatLng(<?php echo $row['lat'] . ',' . $row['lng']?>);
var marker = new google.maps.Marker
(
{
position: myLatlng,
map: map
}
);
<?php }?>
}
</script>
Thanks
Yes. Investigate AJAX.
There are some articles in the Google docs which may help: https://developers.google.com/maps/documentation/javascript/articles
Have a look at Using PHP/MySQL with Google Maps and Creating a store locator with PHP & MySQL. The latter covers getting data out of a database and updating what's shown on the map (it's markers rather a polygon boundary, but the technique is very similar).
If you run into a specific coding difficulty, ask a question about that.
Hi I have posted two values for latitute and longitute to a php page using a form, then on the php page I am displaying a googlemap and want to use the two values i posted as the latitude and longitute to plot on the map. I think iv done everything right but it doesnt seem to pick up the values.any ideas? cheers!
<script type="text/javascript">
function initialize() {
var lat= "<?php echo $_POST['coordinates']; ?>";
var long= "<?php echo $_POST['coordinatestwo']; ?>";
var latlng = new google.maps.LatLng(lat,long);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Your current location!"
});
}
</script>
</head>
<body onLoad="initialize();">
long is a reserved word in JavaScript. Try lng (no 'o') as your variable name instead.
var lng= "<?php echo $_POST['coordinatestwo']; ?>";
If you view source in your browser, do you see the php values there? If not then there is something wrong with your form. We would need to see more code.
But chances are it's the long being a reserved word issue I mentioned above.
Don't use long as a variable name (it's a reserved word). Also, you don't need quotes around numeric values. Try this:
var lat = <?php echo floatval($_POST['coordinates']); ?>;
var lng = <?php echo floatval($_POST['coordinatestwo']); ?>;
EDIT: Tip - if you use a (good) editor with color highlighting and syntax checking for JavaScript, this is an error that would be highlighted (mine reports: "strict warning: long is a reserver identifier").
I have a working jsFiddle here:
http://jsfiddle.net/rcravens/RFHKd/
Mostly your code. I added the following:
A 'div' with an ID of map_canvas
A style to this div giving it width and height.
Included the script to load google maps.
Hope this helps.
Bob
#paul elliot: That doesn't look like all your code..? See this example to fill in the bits your code is missing: http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html