How to Make Google Static Maps Interactive
Caelen King asked:
Google Maps API is great, but for some things it 'destructive capacity that exceeds the enemy forces of s. Enter Google 's static maps, which are also great, but for some uses may not be enough. One solution is to use static maps and then add a bit of panache. Let 's take a typical example where we take a location and in our places of finding 10 of the data about that location. Using static maps we create a URL that has markers for our points and maybe we set the zoom level using the practical quality of span. Unfortunately we can not interact with the map: if the markers are covered can not say which ones are where we need to provide a key to the markers as he has ninguÌ?? No tool-tips or events. Placing divs on the points that our markers are shown we can recover our lost land lot without the need to use a map filled with all indirect costs associated initialization times and especially load. However, do we need to know a bit about map projections and a bit about how Google makes its static maps. The static maps use a Mercator projection, you can read about the math here is probably more than most people want to know. Look? s of? Leta in bits useful to us: Get the x-positionLongitude has equationx = a nice and simple – the yoWhat does this mean for us? Well if we have a map 200 pixels wide and we know the map 's central point of the length in pixels of a pixel level is 2.84 then – say that the 3rd point west (left) is 8533 pixels to the left of our center. How do we know the width of a degree? Well, the map we have is a small window on a worldwide projection. In a zoom level of Google from 0 we can see the whole world (or slightly more depending on the width of our map, a width of 256 pixels should be the world exactly). While we focus within our window shows a smaller and smaller over the world, 2zoom to be accurate. The pixel width of our world grows so therefore if we see a window 256px on the buzz 2 the world is 512px wide, the buzz 3, 1024 pixels and so on. The world is 360th in the round, at level 3 of a degree would hum 1024/360 = 2.84 (or 1024/2pi if we work in radians). Phew! Feel like we 're getting "somewhere? Now we can correctly position a div from the edge of our static image. Get the y-positionLatitude is a little harder to calculate. In our math page we 'll Takeya = ln ((1 + it) / (1-but)) / 2 (use it while using basic functions of the calculator) if we take our center then plug your latitude (in radians ) in our equation (replace that O after each sin) and multiplied by the size of a radian calculation we did for the length, after which we got in our virtual map of the world is the center. Since we know it is the center 's in a 128px? s of 256px? the map that wide. Now when I plugged the latitudes of our markers and get your virtual coordinated our map and we put them in the window on the world because we know its center in the virtual map and our window: Subtract our center 'virtual pixel value s of our virtual pixel markers and – as if by magic will give the value to the compensation of our center of the images. The? s of? Something is missing here … now the observer among us have noticed a bit of skating around some problems. We 'EV which used the value of buzz but we hoped to use the agreeable quality that span to give us our static map … Also, if instead of having a central point we want the map to focus on the center of a system of points marker then however the length of the center will just be (maxLongitude + minLongitude) / 2. The latitude of the center, however, we need to make one that invests in our role as the y-position. Lets start driving a point system. We can easily put on them to find the latitudes and longitudes maximum and minimum of the system. Getting the Centret find that the center of the length is easy: add the maximum and minimum lengths and divide by 2. The latitude of the center is harder – passing the minimum and maximum latitudes with our equation for the latitude Mercator used the last time: y = ln ((1 + it) / (1-but)) / 2Add results together and divide by 2 – then reverse the function, which isMath.Atan (Math.Sinh (RESULT)) – where is the RESULT (ln ((1 + sin (radians (the maxLatitude)) / (1-radians (maxLatitude))) / 2 + ln ((1 + sin (radians (minLatitude)) / (1-radians (minLatitude)))) / 2We 'll have been working in radians and multiply that result by which to achieve 180.00/Math.PI degrees latitude of the center. Calculate Levelt Zoom zoom level are necessary to keep our system of points we first calculate the span of degrees of latitudes and longitudes. Subtract the minimum of the maximum to give us larger spans by grades for our latitude and longitude. If we focus on system level in a Google map: at any given level of buzz anywhere on earth the difference between the maximum length and minimum length remains the same. – If we return to our discussion of tinnitus levels from a week and work backwards … we can consider that we know once a foot in length can use it to find an appropriate level hum. The equation ends up being: log base2 of (180o/longitudeSpano ) all were required to span the length we were interested in … Now – if you look at a map square on a page, the central span of the x-axis not equal the span of the y-axis (except Ecuador) – length is greater. This means that even if the span length is greater than the span of latitude, if we fix our tinnitus for our full length points' latitude values do not necessarily fit within our map again. Fortunately, there is a relationship constant between the palms that depends on latitude – as we get closer to our feet Ecuador latitude get closer to our feet in length (in our square map handy), and dividing our span of latitude by the latitude cos we 'center, the value'll get our foot in length. This means that we use in calculating the zoom level up – using the maximum (span length, tight span of latitude) as our value. As if this whole wasn 't enough, the old problem arises: that it is only the world map neatly into the zoom level 0 if it is 256 pixels wide. To explain this before we make our registration, we divide by 256 and multiply by the width of the map in pixels (at 256pixels wide we are back to where we started). Well that about wraps it up! As promised, it is possible, perhaps even advisable ignore my explanation rolled up and just use some cuts in pre-prepared code instead! MAP_SIZE = 256; private double atanh (double rad) (return Math.log (((1 +) / (the rad 1 – rad)), Math.E) / 2;) getZoom private double (double inch) (double zoom = (180.00/span) * (MAP_SIZE/256.00) = Math.log hum (hum, 2); Math.floor back (beep);) createDivs of yourReturnType (m_maxLatitude double, double m_minLatitude, m_maxLongitude double, double m_minLongitude, m_markerIList the list) {/*** find our center – we can reuse some of the atanhsinO = atanh variables (Math.Sin (m_maxLatitude of these later * / double * Math.PI/180.00)); atanhsinD = double atanh (Math.sin (m_minLatitude * Math.PI/180.00)); double atanhCentre = () / 2 + atanhsinD of atanhsinO; radianOfCentreLatitude double = Math.atan (Math.Sinh (atanhCentre)); centreLatitude = radianOfCentreLatitude double * 180.00/Math.PI; / / turn him degreesdouble centreLongitude = () / 2 + m_maxLongitude of m_minLongitude; / the buzz is decided by the maximum span length and a span of latitude-adjusted relationship between the span of the span of latitude and longitude is / cosdouble latitudeSpan = m_maxLatitude – m_minLatitude; latitudeSpan = latitudeSpan / Math.cos (radianOfCentreLatitude) double longitudeSpan = m_maxLongitude – m_minLongitude; buzz = getZoom doubles (Math.max (longitudeSpan, latitudeSpan)) + 1; / *** creates the x, y coordinated to appear in the center for a map of the Math.Pow energy = (2.00, hum) from Earth * / double, double realWidth energy = 256.00 * / ** Match 1 – size of a degree realWidth dobles/360.00 ** oneDegree = pixel; realWidth double radianLength = / (2.00 * Math.PI) / ** 2 ** central result in our virtual centreY = radianLength mapdouble * atanhCentre; / *** now let suppliers but they create the x, y 's and setting them to the framework map using our Virtual Centrex, and Values * / for (IEnumerator enumerator of m_markerIList.GetEnumerator of our * = (); enumerator.MoveNext ();) / / for (Iterator & lt; LaitutudeLongitude & GT; the latitudeLongitudeIterator = Java runs etc … for a DataRow (markerDetails = ( DataRow) (empadronador. Current); markerDetails of / / LaitutudeLongitude = latitudeLongitudeIterator.next (); for the heads of Java, you get twice currentLatitude = ideadouble. Discuss (markerDetails [ "Lat"]. ToString ()); currentLongitude = double double. Discuss (markerDetails [ "Lng"]. ToString ()); pixelLongitude double = (currentLongitude – centreLongitude) * oneDegree; pixelLatitudeRadians = currentLatitude double * Math.PI/180.00; localAtanh = double atanh (Math.Sin (pixelLatitudeRadians)); realPixelLatitude = radianLength double * localAtanh; pixelLatitude = centreY rooms – realPixelLatitude; converted / / from our virtual map to pixelLongitude exhibited portionpixelLongitude = + (MAP_SIZE / 2); pixelLatitude = pixelLatitude + (MAP_SIZE / 2); = roleOverX of international (International) (Math.floor (pixelLongitude)) = roleOverY of international (International) (Math.floor (pixelLatitude)); / now create any div you want to roleOverX and dice so roleOverY covered the map added to the list or just concatenate a sequence in this loop and then return. eg – shackling the roleOverDiv = the "& lt; div name = '" + markerName + "' id = 'id' + ID + " '" + ROLLOVER_STYLE_STRING + "left:" + roleOverX + "px, top:" + roleOverY + "px;' & GT; & lt; / div & gt;" ;; the back returnString returnString of roleOverDiv of + =), / / if using the example above) enjoys.
Google Maps API is great, but for some things it 'destructive capacity that exceeds the enemy forces of s. Enter Google 's static maps, which are also great, but for some uses may not be enough. One solution is to use static maps and then add a bit of panache. Let 's take a typical example where we take a location and in our places of finding 10 of the data about that location. Using static maps we create a URL that has markers for our points and maybe we set the zoom level using the practical quality of span. Unfortunately we can not interact with the map: if the markers are covered can not say which ones are where we need to provide a key to the markers as he has ninguÌ?? No tool-tips or events. Placing divs on the points that our markers are shown we can recover our lost land lot without the need to use a map filled with all indirect costs associated initialization times and especially load. However, do we need to know a bit about map projections and a bit about how Google makes its static maps. The static maps use a Mercator projection, you can read about the math here is probably more than most people want to know. Look? s of? Leta in bits useful to us: Get the x-positionLongitude has equationx = a nice and simple – the yoWhat does this mean for us? Well if we have a map 200 pixels wide and we know the map 's central point of the length in pixels of a pixel level is 2.84 then – say that the 3rd point west (left) is 8533 pixels to the left of our center. How do we know the width of a degree? Well, the map we have is a small window on a worldwide projection. In a zoom level of Google from 0 we can see the whole world (or slightly more depending on the width of our map, a width of 256 pixels should be the world exactly). While we focus within our window shows a smaller and smaller over the world, 2zoom to be accurate. The pixel width of our world grows so therefore if we see a window 256px on the buzz 2 the world is 512px wide, the buzz 3, 1024 pixels and so on. The world is 360th in the round, at level 3 of a degree would hum 1024/360 = 2.84 (or 1024/2pi if we work in radians). Phew! Feel like we 're getting "somewhere? Now we can correctly position a div from the edge of our static image. Get the y-positionLatitude is a little harder to calculate. In our math page we 'll Takeya = ln ((1 + it) / (1-but)) / 2 (use it while using basic functions of the calculator) if we take our center then plug your latitude (in radians ) in our equation (replace that O after each sin) and multiplied by the size of a radian calculation we did for the length, after which we got in our virtual map of the world is the center. Since we know it is the center 's in a 128px? s of 256px? the map that wide. Now when I plugged the latitudes of our markers and get your virtual coordinated our map and we put them in the window on the world because we know its center in the virtual map and our window: Subtract our center 'virtual pixel value s of our virtual pixel markers and – as if by magic will give the value to the compensation of our center of the images. The? s of? Something is missing here … now the observer among us have noticed a bit of skating around some problems. We 'EV which used the value of buzz but we hoped to use the agreeable quality that span to give us our static map … Also, if instead of having a central point we want the map to focus on the center of a system of points marker then however the length of the center will just be (maxLongitude + minLongitude) / 2. The latitude of the center, however, we need to make one that invests in our role as the y-position. Lets start driving a point system. We can easily put on them to find the latitudes and longitudes maximum and minimum of the system. Getting the Centret find that the center of the length is easy: add the maximum and minimum lengths and divide by 2. The latitude of the center is harder – passing the minimum and maximum latitudes with our equation for the latitude Mercator used the last time: y = ln ((1 + it) / (1-but)) / 2Add results together and divide by 2 – then reverse the function, which isMath.Atan (Math.Sinh (RESULT)) – where is the RESULT (ln ((1 + sin (radians (the maxLatitude)) / (1-radians (maxLatitude))) / 2 + ln ((1 + sin (radians (minLatitude)) / (1-radians (minLatitude)))) / 2We 'll have been working in radians and multiply that result by which to achieve 180.00/Math.PI degrees latitude of the center. Calculate Levelt Zoom zoom level are necessary to keep our system of points we first calculate the span of degrees of latitudes and longitudes. Subtract the minimum of the maximum to give us larger spans by grades for our latitude and longitude. If we focus on system level in a Google map: at any given level of buzz anywhere on earth the difference between the maximum length and minimum length remains the same. – If we return to our discussion of tinnitus levels from a week and work backwards … we can consider that we know once a foot in length can use it to find an appropriate level hum. The equation ends up being: log base2 of (180o/longitudeSpano ) all were required to span the length we were interested in … Now – if you look at a map square on a page, the central span of the x-axis not equal the span of the y-axis (except Ecuador) – length is greater. This means that even if the span length is greater than the span of latitude, if we fix our tinnitus for our full length points' latitude values do not necessarily fit within our map again. Fortunately, there is a relationship constant between the palms that depends on latitude – as we get closer to our feet Ecuador latitude get closer to our feet in length (in our square map handy), and dividing our span of latitude by the latitude cos we 'center, the value'll get our foot in length. This means that we use in calculating the zoom level up – using the maximum (span length, tight span of latitude) as our value. As if this whole wasn 't enough, the old problem arises: that it is only the world map neatly into the zoom level 0 if it is 256 pixels wide. To explain this before we make our registration, we divide by 256 and multiply by the width of the map in pixels (at 256pixels wide we are back to where we started). Well that about wraps it up! As promised, it is possible, perhaps even advisable ignore my explanation rolled up and just use some cuts in pre-prepared code instead! MAP_SIZE = 256; private double atanh (double rad) (return Math.log (((1 +) / (the rad 1 – rad)), Math.E) / 2;) getZoom private double (double inch) (double zoom = (180.00/span) * (MAP_SIZE/256.00) = Math.log hum (hum, 2); Math.floor back (beep);) createDivs of yourReturnType (m_maxLatitude double, double m_minLatitude, m_maxLongitude double, double m_minLongitude, m_markerIList the list) {/*** find our center – we can reuse some of the atanhsinO = atanh variables (Math.Sin (m_maxLatitude of these later * / double * Math.PI/180.00)); atanhsinD = double atanh (Math.sin (m_minLatitude * Math.PI/180.00)); double atanhCentre = () / 2 + atanhsinD of atanhsinO; radianOfCentreLatitude double = Math.atan (Math.Sinh (atanhCentre)); centreLatitude = radianOfCentreLatitude double * 180.00/Math.PI; / / turn him degreesdouble centreLongitude = () / 2 + m_maxLongitude of m_minLongitude; / the buzz is decided by the maximum span length and a span of latitude-adjusted relationship between the span of the span of latitude and longitude is / cosdouble latitudeSpan = m_maxLatitude – m_minLatitude; latitudeSpan = latitudeSpan / Math.cos (radianOfCentreLatitude) double longitudeSpan = m_maxLongitude – m_minLongitude; buzz = getZoom doubles (Math.max (longitudeSpan, latitudeSpan)) + 1; / *** creates the x, y coordinated to appear in the center for a map of the Math.Pow energy = (2.00, hum) from Earth * / double, double realWidth energy = 256.00 * / ** Match 1 – size of a degree realWidth dobles/360.00 ** oneDegree = pixel; realWidth double radianLength = / (2.00 * Math.PI) / ** 2 ** central result in our virtual centreY = radianLength mapdouble * atanhCentre; / *** now let suppliers but they create the x, y 's and setting them to the framework map using our Virtual Centrex, and Values * / for (IEnumerator enumerator of m_markerIList.GetEnumerator of our * = (); enumerator.MoveNext ();) / / for (Iterator & lt; LaitutudeLongitude & GT; the latitudeLongitudeIterator = Java runs etc … for a DataRow (markerDetails = ( DataRow) (empadronador. Current); markerDetails of / / LaitutudeLongitude = latitudeLongitudeIterator.next (); for the heads of Java, you get twice currentLatitude = ideadouble. Discuss (markerDetails [ "Lat"]. ToString ()); currentLongitude = double double. Discuss (markerDetails [ "Lng"]. ToString ()); pixelLongitude double = (currentLongitude – centreLongitude) * oneDegree; pixelLatitudeRadians = currentLatitude double * Math.PI/180.00; localAtanh = double atanh (Math.Sin (pixelLatitudeRadians)); realPixelLatitude = radianLength double * localAtanh; pixelLatitude = centreY rooms – realPixelLatitude; converted / / from our virtual map to pixelLongitude exhibited portionpixelLongitude = + (MAP_SIZE / 2); pixelLatitude = pixelLatitude + (MAP_SIZE / 2); = roleOverX of international (International) (Math.floor (pixelLongitude)) = roleOverY of international (International) (Math.floor (pixelLatitude)); / now create any div you want to roleOverX and dice so roleOverY covered the map added to the list or just concatenate a sequence in this loop and then return. eg – shackling the roleOverDiv = the "& lt; div name = '" + markerName + "' id = 'id' + ID + " '" + ROLLOVER_STYLE_STRING + "left:" + roleOverX + "px, top:" + roleOverY + "px;' & GT; & lt; / div & gt;" ;; the back returnString returnString of roleOverDiv of + =), / / if using the example above) enjoys.